前端存储方案

cookie

• 什么是cookie
  • 在客户端的一种会话跟踪技术,用于将网页中的数据保存到浏览器中
• cookie的生命周期
  • 默认情况下生命周期是一次会话(浏览器被关闭)
  • 如果通过expires=设置了过期时间, 并且过期时间没有过期, 那么下次打开浏览器还是存在
  • 如果通过expires=设置了过期时间, 并且过期时间已经过期了,那么会立即删除保存的数据
• cookie注意点
  • cookie默认不会保存任何的数据
  • cookie不能一次性保存多条数据, 要想保存多条数据,只能一条一条的设置
  • cookie有大小和个数的限制,个数限制: 20~50,大小限制: 4KB左右
• cookie作用范围
  • 同一个浏览器的同一个路径下访问
  • 如果在同一个浏览器中, 默认情况下下一级路径就可以访问
  • 如果在同一个浏览器中, 想让上一级目录也能访问保存的cookie, 那么需要添加一个path属性才可以:document.cookie = "name=zs;path=/;";
  • 若二级域名与顶级域名一样，而三级域名不一样，需要加一个domain属性才可以,如document.cookie = "name=zs;path=/;domain=wxm.com;";

H5新增存储方案

• SessionStorage和LocalStorage
  • SessionStorage和LocalStorage也是用于存储网页中的数据的
• Cookie、 SessionStorage、LocalStorage区别
  • 生命周期(同一浏览器下)
    • Cookie生命周期: 默认是关闭浏览器后失效, 但是也可以设置过期时间
    • SessionStorage生命周期: 仅在当前会话(窗口)下有效，关闭窗口或浏览器后被清除, 不能设置过期时间
    • LocalStorage生命周期: 除非被清除，否则永久保存
  • 容量
    • Cookie容量: 有大小(4KB左右)和个数(20~50)限制
    • SessionStorage容量: 有大小限制(5M左右)
    • LocalStorage容量: 有大小限制(5M左右)
  • 网络请求
    • Cookie网络请求: 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题
    • SessionStorage网络请求: 仅在浏览器中保存，不参与和服务器的通信
    • LocalStorage网络请求: 仅在浏览器中保存，不参与和服务器的通信
  • 应用场景
    • Cookie: 判断用户是否登录
    • LocalStorage: 购物车
    • sessionStorage: 表单数据
    • 无论通过以上那种方式存储的数据, 切记不能将敏感数据直接存储到本地

// 存储
localStorage.setItem("name", "wxm");
// 移除
sessionStorage.removeItem("name");
// 修改
sessionStorage.setItem("name", "jason");
// 获取
value = sessionStorage.getItem("name");
// 清空
sessionStorage.clear();