Cookie、LocalStorage 与 SessionStorage ｜ 青训营

Cookie、LocalStorage 与 SessionStorage

Cookie

cookie是小甜饼的意思。cookie非常小，它的大小限制为4KB左右

它的主要用途有保存登录信息，比如登录某个网站市场可以看到“记住密码”，这通常就是通过在cookie中存入一段辨别用户身份的数据来实现的

LocalStorage

是HTML5标准找那个新加入的技术，当然早在IE6时代就有一个userData的东西用于本地存储，当时考虑到浏览器的兼容性，更通用的方案是flash，如今localStorage被大多数浏览器所支持

localStorage中的键值对总是以字符串的形式存储

localStorage类似sessionStorage，但其区别在于：存储在localStorage的数据可以长期保留

SessionStorage

sessionStorage与 localStorage 的接口类似，但保存数据的生命周期与 localStorage 不同

sessionStorage是一个前端的概念，它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在

页面关闭时 ，sessionStorage中的数据就会被清空

对比

特性	Cookie	localStorage	sessionStorage
数据的生命期	一般由服务器生成，可设置失效时间：如果没有设置失效事件，默认是关闭浏览器后cookie失效；如果设置了失效时间， cookie就会存储在硬盘中，过期失效	永久有效 ，除非手动清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4K左右	5M甚至更多	5M甚至更多
与服务器端通信	在浏览器和服务器之间来回传递，每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信	仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持
作用域	在所有同源窗口中都是共享的	在所有同源窗口中共享	在同一个浏览器窗口是共享的（不同浏览器，即使是同一页面也不共享）

应用

• cookie

  针对登录过的用户，服务器端会在他登录时往cookie中插入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录

• localStorage

  localStorage接替了cookie管理购物车的工作，同时也能胜任其他一些工作。比如HTML5游戏通常会产生一些本地数据

• sessionStorage

  一些内容特别多的表单，为了优化用户体验，我们可能要把表单页面拆分成多个子页面，然后按步骤引导用户填写

使用

1. cookie

• cookie的设置

  关于过期时间：默认情况下，cookie 在浏览器关闭时删除关于路径：默认情况下，cookie 属于当前页面。（cookie的另一属性domain是对应服务器的，服务器下面包含路径）

  document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

• 读取cookie

  var myCookie = document.cookie;

• 修改cookie

  修改 cookie 类似于创建 cookie，旧的cookie将被覆盖

  document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

• 删除cookie

  只需要设置 expires 参数为以前的时间即可

  document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

2. sessionStorage、localStorage

两者类似

localStorage本质上是对字符串的读取，有Json格式时需要JSON.stringify()转化为字符串

• 存储数据

  localStorage.setItem('key', 'value');

• 读取数据

  localStorage.getItem('key');

• 删除数据

  localStorage.removeItem('key');

• 更改数据

  localStorage.setItem('key', 'newValue');