存储界的cookie、本地存储、会话存储

@[toc]

cookie、本地存储、会话存储三者均可以存储数据，存储的时效性有区别

一、cookie

1、是什么

所谓“cookie”数据是指某些网站为了辨别用户身份，储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息。

2、cookie的构成

cookie 作为用户登录时的一种状态信息，Cookie是保存在客户端的纯文本文件。比如txt文件。所谓的客户端就是我们自己的本地电脑。当我们使用自己的电脑通过浏览器进行访问网页的时候，服务器就会生成一个证书并返回给我的浏览器并写入我们的本地电脑。这个证书就是cookie。一般来说cookie都是服务器端写入客户端的纯文本文件。
原理:web服务器通过在http响应消息头增加Set-Cookie响应头字段将Cookie信息发送给浏览器，浏览器则通过在http请求消息中增加Cookie请求头字段将Cookie回传给web服务器。

名称 | Value
-------- | -----
名称 name |一个唯一确定cookie的名称
值value | 存储在cookie中的字符串
域domain:cookie | cookie对于哪个域是有效的
路径 path | 指定域中的指定路径
失效时间 expires | cookie何时应该被删除的时间戳
max-age | 与expires作用相同，用来告诉浏览器此cookie多久过期（单位是秒），而不是一个固定的时间点。正常情况下，max-age的优先级高于expires。
HttpOnly | 告知浏览器不允许通过脚本document.cookie去更改这个值，同样这个值在document.cookie中也不可见。但在http请求仍然会携带这个cookie。注意这个值虽然在脚本中不可获取，但仍然在浏览器安装目录中以文件形式存在。这项设置通常在服务器端设置。
安全标志secure | 指定后，cookie只有在使用SSL连接时才发送到服务器（设置secure标准）

3、cookie 的工作原理

话不多说。先上一张图帮助大家理解cookie 。以登录gitHub仓库为例

原理如下：

问：当我们把浏览器种的cookie信息复制到另一个浏览器中保存进行访问，是不是也可以不用登录直接访问，那这个时候就需要用到cookie劫持

4、cookie的限制

绑定在特定域名下，无法跨越

浏览器对cookie数量的限制规定不同（例如FF规定每个域名最多50个，二Safari和chrome没有数量限制）

所有cookie的累加长度限制为4KB，超长会被忽略
名称 | Value
-------- | -----
JS中的cookie |document.cookie
获取 | 返回当前页面可用的所有cookie的字符串，由分号和空格隔开的一系列名值对（name1 = value1; name2 = value2;）
添加 | cookie的值必须写成key = value的形式，且等号两边不能有空格写入时必须对分号，逗号和空格进行转义（encodeURLComponent()方法）一次只能写入一个cookie，并且写入不是覆盖，而是添加

• 会话cookie是指在不设定它的生命周期 expires 时的状态，前面说了，浏览器的开启到关闭就是一次会话，当关闭浏览器时，会话cookie就会跟随浏览器而销毁。当关闭一个页面时，不影响会话cookie的销毁。

5、cookie的属性

（除了cookie本身的内容，还有部分可选属性可以被写入，必须都以分号开头）

二、localStorage（本地存储）

本地存储，在HTML5中，加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是20M大小，这个在不同的浏览器中localStorage会有所不同。它只能存储字符串格式的数据，所以最好在每次存储时把数据转换成json格式，取出的时候再转换回来。数据没有过期时间。

1. 生命周期永久有效，除非手动删除，否则关闭页面也会存在
2. 可以多窗口（页面）共享（同一浏览器可以共享）
3. 以键值对的形式存储使用

例：标准的json对象{“name”:“john”}

• JSON.stringify(); // 将json格式的数据（JavaScript 对象）转换成JSON格式的字符串
  例：

var  data = {
   
   name:"john"};
data = JSON.stringify(data);
localStorage.setItem("data1",data);

• JSON.parse(); //将JSON格式的字符串转换成JSON对象进行处理
  

localStorage.setItem("name","john"); //设置name为john
localStorage.setItem("name","john1"); //覆盖之前的值，现在name所对应的值是john1

注：

1. 各浏览器支持的localStorage容量上限不同；
2. localStorage.getItem('key'); 如果key不存在则返回null，而不是 undefined