本地存储的几种方式

一、cookie

cookie算是比较早的技术，最初是为了记录http的状态，提高访问速度。cookie是服务器"种植"在客户端的key-value形式文本文件。但同时客户端也能操作cookie。
特点：

大小：cookie的大小限制在4k。每个域名下cookie的个数现在在20个。
在客户端请求服务器端和服务器响应时，cookie始终被携带在http请求中，即使不需要(造成流量浪费)。这也是限制cookie大小的原因。
客户端可以通过document.cookie操作cookie，并不安全。
cookie可以设置过期时间、路径、域和httpOnly等字段。如果设置了过期时间，cookie会保存在硬盘里，知道到了设定的过期时间才会失效。若未设置过期时间，在浏览器窗口关闭时，cookie就失效了。路径和域两个字段限制了cookie的作用范围。httpOnly设置为true，则js不能通过document.cookie操作cookie。

二、localStorage

它也是采用key-value的形式存储数据，但是它与cookie有很大的区别
特点：

对比着来，localStorage能保存更大的数据，标准浏览器是5Mb。
localStorage保存在客户端，不随着请求发送给服务器，避免了流量的浪费。
客户端可以通过：setItem、getItem方法访问localStorage。
并且，localStorage没有过期时间，如果不手动清除，数据就永远不会过期，一直保存在浏览器当中。
存储的信息在同一域中是共享的。

//key，value 都必须是字符串，storage 的api 只能操作字符串
//设置
window.sessionStorage.setItem(key,value)
//获取
window.sessionStorage.getItem(key)
//删除某个数据
window.sessionStorage.removeItem(key)
//清除所有数据
window.sessionStorage.clear()
//获取某个索引的key
window.sessionStorage.key(index)

三、sessionStorage

特点：

与localStorage不同的是，sessionStorage并不持久化，在窗口关闭那一刻，sessionStorage会被清除。
存储的信息是会话级别的，同域也是不能共享的。关闭当前标签页，sessionStorage即失效。

//存储
sessionStorage.setItem("key","value"）
//按key获取值
sessionStorage.getItem(key)
//按key 删除单个值
sessionStorage.removeItems(key)
//清除所有数据
sessionStorage.clear()
//获取数据的数量
sessionStorage.length
//获取全部值
sessionStorage.valueOf()
//sessionStorage也可存储Json对象：存储时，通过JSON.stringify()将对象转换为文本格式；读取时，通过JSON.parse()将文本转换回对象。
var userEntity = {
name: 'tom',
age: 22
};

// 存储值：将对象转换为Json字符串
sessionStorage.setItem('user', JSON.stringify(userEntity));

// 取值时：把获取到的Json字符串转换回对象
var userJsonStr = sessionStorage.getItem('user');
userEntity = JSON.parse(userJsonStr);
console.log(userEntity.name); // => tom

浏览器本地存储统称为webStorage，包括了localStorage和sessionStorage

四、session(附加)

上面提到了cookie，顺带提一下session。客户端第一次访问服务器，服务器种植一个cookie，保存唯一的sessionId。后面客户端再次访问，会读取此sessionId，随即能在服务端读取到此id保存的会话对象。
特点：

session是基于cookie的，由于session在客户端不可被修改，相对于cookie来说安全，所以可存放一些重要数据。
数据保存在服务器端，客户端通过sessionId，读取到相对应的数据。