关于cookie、session、sessionStorage、localStorage各自的特点和使用方法

因为HTTP协议是一种无状态协议，每一次HTTP请求都是独立的，不受它之前和之后的请求的影响，所以比如登录信息，这次请求带着登录的信息，下次请求不知道有没有登录，无法追踪上次的请求，所以如果没有别的手段只能每次传很多参数。

cookie和session，可以与服务器交互通信的。

Cookie:

cookie保存在浏览器端，单个数据大小不超过4KB，是服务器发送到客户端的特殊信息，保存成字符串类型以文本的方式保存在客户端，会随着每次HTTP请求头request header发送到服务器端。如果不在浏览器中设置过期时间，cookie被保存在内存中，浏览器关闭就会删除这些cookie信息；如果设置了过期时间，cookie被保存在硬盘中，直到过期时间才会删除这些信息。

cookie应用场景：记录是否登录，上次登录时间，浏览的页面，浏览次数等

cookie的缺点：

1）存储空间很小，只有4kb，存储数量限制，一般一个站点只能有20个cookie

2）用户可以操作（禁用或者修改删除）cookie，使功能受限

3）安全性较低

4）每次访问都要传送cookie给服务器，浪费带宽，如果保存过多数据影响性能。

获取cookie：

var cookieData = document.cookie; 
// cookie是每个cookie键值对通过一个分号+空格的形式串联起来的，例：key1=value1; key2=value2; key3=value3; 

设置/修改cookie：

cookie选项包括：

expires(http/1.0协议中的过期时间,GMT格式)、

max-age(http/1.1协议中的单位是秒的时间段，失效时间是创建时间 + max-age)、

domain(域名)、path(路径)、

secure(当请求是HTTPS或者其他安全协议时，包含 secure 选项的 cookie才能被发送至服务器，安全协议时才能在客户端设置secure参数)、

HttpOnly(在客户端是不能通过js代码去访问一个httpOnly类型的cookie的，也不能设置httpOnly参数，这种类型的cookie只能通过服务端来设置)

// 设置cookie以及过期时间
var exp = new Date();
exp.setDate(exp.getDate() + 1);
document.cookie = "key=value; expires=" + exp.toGMTString();
// 如果不设置过期时间，浏览器关闭就会删除cookie
document.cookie = "key=value";

删除cookie：

// 设置过期时间为现在以前的时间
var exp = new Date();
exp.setDate(exp.getDate() - 1);
document.cookie = "key=; expires=" + exp.toGMTString();

Session:

session保存在服务器端内存中，没有大小限制，通过类似与Hashtable的数据结构来保存，能支持任何类型的对象(session中可含有多个对象)。服务器端创建session对象时会检测客户端请求有没有包含sessionId，如果没有就创建一个并且返回给客户端，客户端一般记在cookie里，如果HTTP请求带着sessionId，就返回对应的session对象。如果用户禁用cookie，需要使用response.encodeURL(url)进行URL重写把sessionID拼在url后面。每次启动session_start后前一次的sessionID就失效或者session过期后sessionID也会失效。

session应用场景：保存用户登录信息，防止用户非法登录等。

session的缺点：

1）扩展性弊端，要求客户端代码和服务端代码在同一台服务器上，协议/域名/端口号一致。（PS：如果不在同一个服务器上，可以使用token进行身份验证）

2）Session保存的东西越多，就越占用服务器内存，对于用户在线人数较多的网站，服务器的内存压力会比较大。而且当用户离开网站后，这些session还会保存一段时间，造成资源浪费。

3）重启服务器，session数据会丢失。

4）依赖于cookie（sessionID保存在cookie），如果禁用cookie，则要使用URL重写，不安全

5）创建Session变量有很大的随意性，可随时调用，不需要开发者做精确地处理，所以，过度使用session变量将会导致代码不可读而且不好维护

---

WebStorage：localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据，不与服务器交互通信。存储大小5MB。只能存储字符串。存储的数据直接本地获取，比HTTP请求快。

sessionStorage:

sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。应用场景：每次打开网页需要重新登录的登录信息。

保存数据语法：

sessionStorage.setItem("key", "value");
// 或者
sessionStorage.key = value;
// 或者
sessionStorage["key"] = value;

读取数据语法：

var lastname = sessionStorage.getItem("key");
// 或者
var lastname = sessionStorage.key;
// 或者
var lastname = sessionStorage["key"];
// 获取key名
sessionStorage.key(index); // 一般用不到，因为不仅仅有自己存的，所以你不知道你想要的那个key的index是啥

删除指定键的数据语法：

sessionStorage.removeItem("key");

删除所有数据：

sessionStorage.clear();

---

localStorage:

localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。应用场景：长期登录的保存登录信息。

保存数据语法：

localStorage.setItem("key", "value");
// 或者
localStorage.key = value;
// 或者
localStorage["key"] = value;

读取数据语法：

var lastname = localStorage.getItem("key");
// 或者
var lastname = localStorage.key;
// 或者
var lastname = localStorage["key"];
// 获取key名
localStorage.key(index); // 一般用不到，因为不仅仅有自己存的，所以你不知道你想要的那个key的index是啥

删除数据语法：

localStorage.removeItem("key");

删除所有数据语法：

localStorage.clear();