sessionStorage & localStorage、session & cookie

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

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

一、cookie

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

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

2、cookie的缺点：

（1）存储空间小，只有4KB，存储数量限制，一般一个站点只有20个cookie；
（2）用户可以操作（禁用或者修改删除）cookie，使功能受限；
（3）安全性较低；
（4）每次访问都要传送cookie给服务器，浪费带宽，如果保存过多数据影响性能。

3、
（1）获取cookie

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

（2）设置/修改cookie：
   cookie的选项包括：
          expires（过期时间，GMT格式）;
          max-age（单位为秒的时间段，失效时间是创建时间 + 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);
documengt.cookie = 'ke=value; expire=' + exp.toGMTString();
// 如果不设置过期时间，浏览器关闭后就会删除cookie
document.cookie = 'key=value';

（3）删除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重写把sessionId拼在url后面。每次启动session_start后前一次的sessionID就会失效或者session过期后的sessionID也会失效。

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

session的缺点：

（1）扩展性弊端：要求客户端代码和服务端代码在同一台服务器上，协议/域名/端口号一致。（如果不在同一个服务器上可以使用token进行身份验证）；
（2）session保存的东西越多，就越占用服务器内存，对于用户在线任何较多的网站，服务器的内存压力会比较大。当用户离开这些网站后，这些session还会保存一段时间，造成资源浪费。
（3）重启服务器，session数据会丢失；
（4）依赖于cookie(sessionID写在cookie里)，如果禁用cookie，则要使用URL重写，不安全；
（5）创建session变量有很大的随意性，可随时调节，不需要开发者做精确的处理，所以过度使用session变量将会导致代码不可读不好维护。

_____________________________________________________________________________

WebStorge：localStorge和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)

删除指定键：

Storage.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();

文章摘至于：文章