cookie、localStorage和sessionStorage详解

前端本地存储

目前前端本地存储比较常见的方式有如下三种：

1. cookie
2. localStorage
3. sessionStorage

这里再一次清晰地记录下这其中的一些知识点；

cookie

cookie是浏览器 提供的一种机制，它将document 对象的cookie属性提供给JavaScript。能够由JavaScript对其进行控制，而并非JavaScript自己的性质。Cookie意为“甜饼”，是由W3C组织提出，最先由Netscape社区发展的一种机制。目前Cookie已经成为标准，全部的主流浏览器如IE、Netscape、Firefox、Opera等都支持Cookie。

因为HTTP是一种无状态的协议，服务器单从网络链接上无从知道客户身份。怎么办呢？就给客户端们颁发一个通行证吧，每人一个，不管谁访问都必须携带本身通行证。这样服务器就能从通行证上确认客户身份了。这就是Cookie的工做原理。

Cookie其实是一小段的文本信息。客户端请求服务器，若是服务器须要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie，以此来辨认用户状态。服务器还能够根据须要修改Cookie的内容。

注意：cookie是不可跨域的，不过对于相同顶级域名的二级域名仍是能够经过设置'domain'的方法能够进行跨域的

有些Cookie 是有限制的，一旦超过期间限制，就会被系统删除。不少人担忧Cookie 会泄露用户的一些信息。但这是多余的，Cookie 是不能经过跨域来访问的，还有一些对象是不能脱离Cookie 来实现的，好比Session。这里还有一个点，就是客户端Cookie 数量最多为300个，每一个不能超过4kb, 每一个web站点设置的cookie 数量不能超过20个。

读取cookie

对于cookie的读取，最基本的就是document.cookie；须要注意如下几点：

1. cookie是相对于同域而言的，同一个域的cookie才是互通的【设置过特殊domain的cookie能够共享至同顶级域名的二级、三级域名下】；
2. 通常来讲，只有服务器操做Cookie 才能保证一些必要的安全。但有时候，可能须要前端来增删改查 Cookie, 这个时候我们的主角出现了——HttpOnly；HttpOnly是包含在Set-Cookie HTTP响应头文件中的附加标志。生成cookie时使用HttpOnly标志有助于下降客户端脚本访问受保护cookie的风险（若是浏览器支持）。若是某一个Cookie 选项被设置成 HttpOnly = true 的话，那此Cookie 只能经过服务器端修改，Js 是操做不了的，对于 document.cookie 来讲是透明的
3. document.cookie获取的是一个字符串【写cookie时全部各类类型的值都会被强制转换为字符串】，document.cookie是当前域下的全部可读的cookie经过【key=value】的形式链接在一块儿，中间使用;分号来隔开；【_app=qunar; _user=cwj; _test=sbsb】,因为cookie中都是默认字符串，因此key/value不会存在单引号/双引号；

写入cookie

cookie能够经过服务端来设置，也能够经过前端来写入；写入的内容基本一致，只是写入的方式略有不一样；最大的区别在于服务端能够设置'HttpOnly'这个来限制客户端对其进行修改；

客户端写入：

document.cookie = newCookie;

newCookie是一个键值对形式的字符串。须要注意的是，用这个方法一次只能对一个cookie进行设置或更新。如下可选的cookie属性值能够跟在键值对后，用来具体化对cookie的设定/更新，使用分号以做分隔：

;path=path (例如 '/', '/mydir') 若是没有定义，默认为当前文档位置的路径。
;domain=domain (例如 'example.com'， '.example.com' (包括全部子域名),'subdomain.example.com') 若是没有定义，默认为当前文档位置的路径的域名部分。
;max-age=max-age-in-seconds (例如一年为60*60*24*365),这项设置比expires的优先级高；
;expires=date-in-GMTString-format 若是没有定义，cookie会在对话结束时【浏览器关闭后删除】过时，这个值的格式参见Date.toUTCString() 
;secure (cookie只经过https协议传输)

cookie的值字符串能够用encodeURIComponent()来保证它不包含任何逗号、分号或空格(cookie值中禁止使用这些值)。

须要注意的是若是想删除一个cookie的话，只能是经过设置有效期为当前时间以前【expires】或者max-age为0

localStorage

localStorage 本地存储是HTML5的新技术，相比cookie，它的存储容量大，通常cookie 只有几K。给咱们前端开发带来了方便，可是在实际的使用中，会发现，它远不是那么简单。有如下几大特性：

1. 永久存储单个域名存储量比较大（推荐5MB，各浏览器不一样）整体数量无限制
2. 浏览器关闭不清除。页面之间能够实现共享。同一域名下实现共享，【顶级域名和二级/三级域名不共享】
3. 只要不清除。能够在本地永久储存。

简单读取方法：

myStorage = localStorage;

返回一个 Storage 可被用于访问当前远端（ origin ）的本地存储空间的对象【包括了存储的键值对和length属性】。

读取的时候有时候也会返回异常：SecurityError
请求违反了一个策略声明，或者远端（ origin ）不是 a valid scheme/host/port tuple （例如若是origin使用 file: 或者 data: 形式将可能发生）。好比，用户能够有禁用容许对指定的origin存留数据的浏览器配置。

使用方法

localStorage目前有五个API供使用：

1. localStorage.getItem(key) // 推荐的根据键key来读取值vakue的方法
2. localStorage.setItem(key, value) // 推荐的写入一键值对的方法
3. localStorage.removeItem(key) // 推荐的根据键key来删除某一键值对
4. localStorage.clear() // 清空
5. localStorage.key(index) // 根据索引值返回对应的key

其实localStorage能够像JavaScriptd的对象同样来使用，

localStorage.a、localStorage.['a'] 和 localStorage.getItem(a) 效果同样，推荐使用最后者
localStorage.a = 'aaa'、localStorage.['a']='aaa' 和 localStorage.setItem('a','aaa') 效果同样，推荐使用最后者

注意：localStorage目前只支持存储字符串，其余格式均会被转换为字符串来存储，想要存储其余能够考虑JSON.parse/JSON.stringify配合使用

sessionStorage

sessionStorage 属性容许你访问一个 session Storage 对象。它与 localStorage 类似，不一样之处在于 localStorage 里面存储的数据没有过时时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。
页面会话在浏览器打开期间一直保持，而且从新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面会初始化一个新的会话，这点和 session cookies 的运行方式不一样。
应该注意的是，不管是 localStorage 仍是 sessionStorage 中保存的数据都仅限于该页面的协议。

使用方法彻底和localStorage彻底同样；由于都是都是Web Storage API 的接口实现；

做为 Web Storage API 的接口，Storage 提供了访问特定域名下的会话存储（ session storage）或本地存储（ local storage）的功能，例如，能够添加、修改或删除存储的数据项。
若是你想要操做一个域名的会话存储（ session storage），可使用 Window.sessionStorage；若是想要操做一个域名的本地存储（ local storage），可使用 Window.localStorage。

注意：和localStorage区别仅在于存在的时间，同时刷新和恢复当前页面的话，sessionStorage都会保持原有的，可是新开页面就会初始化一个新的sessionStorage