数据存储 cookie、localStorage、sessionStorage

数据存储

cookie

cookie只能在服务器环境下使用
cookie存储的是键值对(key=value,如果没有等于号,默认是key为空,value为存储的值)

//cookie 设置的是字符串
document.cookie='username='+inp.value;
document.cookie='age=20'

• 设置生存期
  1. cookie默认生存期是 一次会话(session)

  let d=new Date()
  d.setDate(d.getDate+2)
  document.cookie='key=value;expires='+d
  

• 销毁cookie(一般两个一起设置)
  1. 将cookie数据清空，即将需要删除的cookie的值设置成空字符串
  2. 生存期到期会自动销毁，设置一个以前的时间，一般设置为-1 //改为默认值，即session
• 设置路径path

  父级目录下，无法获取子目录设置的cookie数据,因此需要获取子目录下cookie，需要设置path

  document.cookie="key=value;path=/" //设置为根目录
  

html5存储

html5 新增的存储和会话方案，广泛使用于移动端

1. localStorage(本地页面)

执行过就会存在，不论代码在不在，需要手动删除

• 长期有效
• 保存在浏览器中
• 不能跨浏览器使用
• 手动删除 清除缓存 过期

2. sessionStorage

• 有效期仅一次会话

方法

let ls=localStorage;
// let sS=sessionStorage; //方法相同
ls.setItem(key,value)
ls.getItem(key)
ls.removeItem(key)
ls.clear() //清空
ls.key(index) //通过下标获得key
    for(var i=0;i<ls.length;i++){
        ls.getItem(ls.key(i))
    }

三种存储方式的区别

1. 运行环境

• cookie 在服务器环境使用
• localStorage 可以在离线使用(本地)
• sessionStorage 在服务器环境使用

2. 共同点

• 用于数据存储
• 存在本地浏览器
• 多个页面之间数据共享
• 不能跨浏览器使用
• 存储的内容是字符串 JSON字符串

3. 不同点

• cookie

  • 大小限制4kb
  • cookie没有相关的操作方法 需要自己封装
  • 默认一次会话有效 可以设置生存期
  • 每次都会携带在http头中(request headers)，如果使用cookie保存过多数据会带来性能问题
  • 考虑兼容问题要用cookie

• localStorage

  • 存储大小 5M
  • 长期有效 需要手动清除/清除缓存
  • 提供了相关操作方法 使用方便
  • 仅在客户端(浏览器)中保存,不参与和服务器的通信

• sessionStorage

  • 存储大小 5M
  • 会话存储 关闭浏览器 自动销毁
  • 提供了相关操作方法 使用方便
  • 仅在客户端（即浏览器）中保存，不参与和服务器的通信

注意

cookie、localStorage、sessionStorage等存储字符串，json字符串(存储对象是要stringify转为json字符串，否则自动toString()为[object Object])