前端JS基础十（存储）

存储

• cookie
• localStorage （HTML5新特性）
• sessionStorage （HTML5新特性）

cookie

• 本身用于客户端和服务端的通信，但是它有本地存储功能，于是就被借用。
• 使用 document.cookie = xxx 获取和修改
• 缺点
  存储量太少
  所有http请求都会携带cookie，会影响获取资源的效率
  API简单，需要封装才能用document.cookie=xxx

localStorage 和 sessionStorage

• HTML5专门为存储而设计，最大容量5M，不用在请求中携带
• API简洁易用
  localStorage.setItem(key,value);
  localStorage.getItem(key);
  sessionStorage.setItem(key,value);
  sessionStorage.setItem(key,);
• 区别
  sessionStorage在浏览器关闭后就会自动清理掉
  localStorage会一直存在本地，大部分情况下用localStorage
• 注意
  在iOS Safari隐藏模式下，localStorage.getItem会报错
  建议统一使用try-catch进行封装

练习题

• 练习题1、cookie, localStorage与sessionStorage的区别
  1，容量（cookie最大4Kb，localStorage与sessionStorage最大5Mb）
  2，是否会携带到Ajax中（cookie会，localStorage与sessionStorage不会）
  3，API易用性（cookie需要自己封装，localStorage与sessionStorage不用）