本地储存 - Cookie、LocalStorage与SessionStorage

一、基本概念

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使用

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))