cookie、sessionStorage、localStorage都是客户端存储的解决方法

相同点

都是保存在浏览器端，并且都是同源的(URL的协议、端口、主机名都相同)

不同点

1. 数据的生命周期
   cookie：如果不在浏览器中设置过期时间，cookie会保存在内存中，生命周期随浏览器关闭而结束。如果设置了过期时间，cookie会保存在硬盘中，关闭浏览器，cookie数据任然存在，知道过期时间结束才消失
   SessionStorage：当页面或者浏览器关闭的时候，生命周期结束，SessionStorage数据被清空
   Localstorage：长期存储，除非手动清除，否则永久保存

2. 存放数据大小：
   cookie：4kb左右
   SessionStorage和Localstorage：一般5M

3. 与服务器端通信：
   cookie：每次都会携带在HTTP请求头中，即使不需要，也会被传送到服务器
   SessionStorage和Localstorage：不与服务器端通信

4. 安全性：
   cookie：针对cookie所存在的攻击：cookie欺骗，cookie截获
   SessionStorage和Localstorage不会与服务器端通信，所以相比cookie，安全性更高，不用担心会被截获，但是仍然会存在伪造问题

5. 数据操作
   cookie：原生cookie接口不友好，一般会重新封装在使用
   SessionStorage和Localstorage提供了一些方法，数据操作比cookie方便

6. 应用场景：
   sessionStorage：敏感账号一次性登录
   localStorage：常用于长期登录
   cookie：
   (1).判断用户是否登录过网站，以便下次登录时能够实现自动登录(或者记住密码)
   (2). 保存上次的登录信息
   (3).保存上次查看的页面
   (4). 浏览计数

7. cookie的缺点

• 大小受限制
• 用户可以禁用cookie，使功能受限
• 安全性比较低
• 每次请求都要传送cookie到服务器端，浪费带宽

localStorage和sessionStorage操作方法

1. setItem：将value存储在key字段

sessionStorage.setItem("key", "value");
localStorage.setItem("key", "value");

2. getItem：获取指定key存储的值

var value = sessionStorage.getItem("key");
var value = localStorage.getItem("key");

3.removeItem：删除指定key存储的值

sessionStorage.removeItem("key");
localStorage.removeItem("key");

4.clear：删除所有的数据

sessionStorage.clear();
localStorage.clear();

其他操作方法

localStorage和sessionStorage除了自身的setItem、getItem等方法之外，还可以用点操作和[]

var storage = window.localStorage;
storage.key1 = "hello";
storage["key2"] = "world"
console.log(storage.key1); // "hello"
console.log(storage["key2"]); // "world"

localStorage和sessionStorage提供的key()和length可以方便的实现存储数据的遍历

var storage = window.localStorage;
for(var i = 0, len = storage.length; i < len; i++) {
    var key = storage.key(i);
    var value = storage.getItem(key);
    console.log(key + "=" + value); 
}