【前端学习总结_16】保存文件：Cookie、LocalStorage、SessionStorage

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/u010263423/article/details/102702781

---

文件保存

Cookie

• 特点：占用小，由服务端产生
• 大小：均值为4kb左右
• 用途：用来做住密码
• 生命周期：可设置，不设置的话浏览器生成，而且关闭浏览器就用不了了，

LocalStorage

• 特点：

• 大小：5mb~10mb

• 用法：
  window.localStorage.removeItem(key) 根据关键字删除
  window.localStorage.clear() 删除所有

• 用途：京东广告（就是第一次弹出广告，之后就没有了）

• 故事：ie6 以前提起过这个概念

• 生命周期：存在本地，不手动删除的话就不会没有

  //实例代码块
  var loc = localStorage;
      for (var i = 0, len = loc.length; i < len; i++) {
          /*通过key(下标) 来找到key*/
          var key = loc.key(i);
          /*通过getItem(key) 来找到对应的value值*/
          var val = loc.getItem(key);
          console.log(val);
      }
  

SessionStorage

• 特点：session 后台叫“会话”
• 大小：5mb左右
• 声明周期：保存在一次会话当中，页面打开到关闭，称作一次会话，关闭页面自动销毁

扩展知识

• indexDB 非关系型数据库，key-value 型
• B/S 浏览器/服务
• C/S 客户端/服务 做成产品

---