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