一、概念

1. Cookie的大小限制为4kb左右，主要作用是保存登录信息，比如登录某个网站时候看到“记住密码”，一般都是通过在Cookie中存入一段辨别用户身份的数据来实现的。
2. LocalStorage和sessionStorage都是HTML5 标准中新加入的技术，主要用来做本地存储，但是二者保存数据的生命周期不同，Session 是“会话”的意思， sessionStorage 只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在，但当页面关闭后，sessionStorage 中的数据就会被清空。而LocalStorage存储的数据除非被清除，否者永远存在本地。

   二、异同

   | 特性 | Cookie | localStorage | sessionStorage | | —- | —- | —- | —- | | 数据的生命期 | 一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效 | 除非被清除，否则永久保存 | 仅在当前会话下有效，关闭页面或关闭浏览器后被清除 | | 存放数据大小 | 4K左右 | 一般为5MB | | | 与服务器端通信 | 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题 | 仅在客户端（即浏览器）中保存，不参与和服务器的通信 | | | 易用性 | 需要程序员自己封装，源生的Cookie接口不友好 | 源生接口可以接受，亦可再次封装来对Object和Array有更好的支持 | |

三、应用场景

• 因为考虑到每个 HTTP 请求都会带着 Cookie 的信息，所以 Cookie 当然是能精简就精简啦，比较常用的一个应用场景就是判断用户是否登录。针对登录过的用户，服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录啦
• Localstorage常用于长期登录，适合长期保存在本地的数据，比如用户信息；Sessionstorage常用于敏感账号一次性登陆，如关闭当前页面再次打开页面就要重新登陆

  四、LocalStorage、sessionStorage使用

  ```javascript localStorage.setItem(“key”,”value”) //增加 localStorage.getItem(“key”) //读取 localStorage.removeItem(“key”) //删除指定 localStorage.clear() //删除所有

// 注意：只能存储字符串，不能存储对象、JSON等其他数据格式

// 存储对象时，需要通过JSON.stringify()将对象转化为字符串 localStorage.setItem(key,JSON.stringify(data)) // 取出对象时，需要通过JSON.parse()将字符串转化为对象 JSON.parse(localStorage.getItem(key)) ```