cookie、sessionStorage、localStorage 详解及应用场景

前言

Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生

Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在

了解cookie

要表示唯一的一个cookie值需要：name、domain、path
一个cookie就是一个小型的文本文件
虽然cookie保存在浏览器端，但是一般是在服务器端设置的。
可以在HTTP返回体里，通过设置Set-Cookie来告诉浏览器端所要存储的cookie。
用来保存客户浏览器请求服务器页面的请求信息

cookie相关字段的说明

名称：一个唯一确定cookie的名称。cookie名称是不区分大小写的。cookie的名称必须是经过URL编码的。
值：储存在cookie中的字符串值。值必须被URL编码。
域：cookie对于哪个域是有效的。所有向该域发送的请求中都会包含这个cookie信息。如果没有明确设定，那么这个域会被认作来自设置cookie的那个域。
路径：对于指定域中的那个路径，应该向服务器发送cookie。例如，你可以指定cookie只有从http://www.wrox.com/books/ 中才能访问，那么 http://www.wrox.com 的页面就不会发送cookie信息，即使请求都是来自同一个域的。
失效时间：表示cookie何时应该被删除的时间戳（也就是，何时应该停止向服务器发送这个cookie）。默认情况下，浏览器会话结束时即将所有cookie删除；不过也可以自己设置删除时间。这个值是个GMT格式的日期（Wdy,DD-Mon-YYYY HH:MM:SSGMT），用于指定应该删除cookie的准确时间。因此，cookie可在浏览器关闭后依然保存在用户的机器上。如果你设置的失效日期是个以前的时间，则cookie会被立刻删除。
安全标志：指定后，cookie只有在使用SSL连接的时候才发送到服务器。例如，cookie信息只能发送给 https://www.wrox.com ，而 http://www.wrox.com 的请求则不能发送 cookie。

cookie的应用场景

简单来说，Cookie就是服务器暂存放在你的电脑里的资料（.txt格式的文本文件），好让服务器用来辨认你的计算机。当你在浏览网站的时候，Web服务器会先送一小小资料放在你的计算机上，Cookie 会把你在网站上所打的文字或是一些选择都记录下来。当下次你再访问同一个网站，Web服务器会先看看有没有它上次留下的Cookie资料，有的话，就会依据Cookie里的内容来判断使用者，送出特定的网页内容给你。

网站可以利用cookie跟踪统计用户访问该网站的习惯，比如什么时间访问，访问了哪些页面，在每个网页的停留时间等。利用这些信息，一方面是可以为用户提供个性化的服务，另一方面，也可以作为了解所有用户行为的工具，对于网站经营策略的改进有一定参考价值。

目前Cookie最广泛的是记录用户登录信息，这样下次访问时可以不需要输入自己的用户名、密码了——当然这种方便也存在用户信息泄密的问题，尤其在多个用户共用一台电脑时很容易出现这样的问题。

cookie的原生的API，需要我们自己进行封装

//直接复制 【直接复制不是覆盖，而是追加】
document.cookie = 'name=value;'

//封装setCookie方法
//setCookie 首先对name和value进行编码
function setCookie(name,value,expires,path,domain,secure){
  var cookie = encodeURIComponent(name)+ '=' +encodeURIComponent(value);
  //注意分号后面要有空格
  //后面的4个参数是可选的，所以用if判断并追加
  if(expires){
    cookie +='; expires='+expires.toGMTString();
  }
  if(path){
    cookie += '; path='+path;
  }
  if(domain){
    cookie += '; domain='+domain;
  }
  if(secure){
    cookie += '; secure='+secure;
  }
  document.cookie = cookie;
}

删除cookie

输入参数为name、path、domain 这3个是唯一标识cookie的,将max-age设置为0，就可以立即删除了。

function remove(name,domain,path){
  document.cookie = 'name='+name+'; domain='+domain +'; path='+path +'; max-age=0';
}

cookie缺点

Cookie数量和长度的限制。IE6或更低版本每个domian下最多20个cookie，IE7和之后的版本最多可以有 50个cookie，Firefox最多50个cookie，chrome和Safari没有做硬性限制，每个cookie长度不能超过4KB，否则会被截掉。
IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。这就导致不能永久储存信息。
安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。
并且每次你请求一个新的页面的时候，cookie只要满足作用域和作用路径，Cookie都会被发送过去，这样无形中浪费了带宽。

本地储存

Web Storage是为了在本地“存储”数据而生。html5中的 Web Storage 包括了两种存储方式：sessionStorage和localStorage

localStorage && sessionStorage

只要有效期和作用域，浏览器每次访问的时候都会将Storage载入到内存里
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁
localStorage也受同源策略的限制。
localStorage和sessionStorage都具有相同的操作方法，如setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

localStorage应用场景

localStorage可以用于存储该浏览器对该页面的访问次数，当然，如果换个浏览器，这个次数就重新开始计数了。还可以用来存储一些固定不变的页面信息，这样就不需要每次都重新加载了，这个值也可以进行覆盖。

访问这个页面的时候，script 脚本会自动运行，localStorage.pagecount就会 ++ 了，从而达到统计页面访问次数的目的。

<!DOCTYPE HTML>
<html>
<body>
  <script type="text/javascript">
    if (localStorage.pagecount){
      localStorage.pagecount=Number(localStorage.pagecount) +1;
    }
    else{
      localStorage.pagecount=1;
    }
    document.write("Visits: " + localStorage.pagecount + " time(s).");
  </script> 
  <p>刷新页面会看到计数器在增长。</p>
  <p>请关闭浏览器窗口，然后再试一次，计数器会继续计数。</p>
</body>
</html>

sessionStorage应用场景

使用 sessionStorage 进行页面传值

//有时会有这样的需求，我们从A页面获取的数据，需要在B页面发送给后端，这时就需要我们将数据从A页面传递到B页面。
//A页面
//首先检测Storage
if (typeof(Storage) !== "undefined") {
  sessionStorage.'name'=value;
} else {
  sessionStorage.name = '';
}
//B页面
if (typeof(Storage) !== "undefined") {
  var B_name = sessionStorage.name;
}
//注意，如果要储存的数据对象、数组
//那么在储存之前，用JSON.stringify将数据转换为字符串
//读取之后，再用JSON.parse转换为对象、数组
//存储
var obj = {name:"xiaoxiong",age:25};
var arr = [1,2,3,4];
window.sessionStorage.obj = JSON.stringify(obj);
window.sessionStorage.arr = JSON.stringify(arr);
//读取
var OBJ = window.sessionStorage.obj;//"{"name":"xiaoxiong","age":25}"
JSON.parse(OBJ);//Object {name: "xiaoxiong", age: 25}
var ARR = window.sessionStorage.arr;//"[1,2,3,4]"
JSON.parse(ARR);//(4) [1, 2, 3, 4]

总结

cookie数量和长度都有限制，Web Storage解决了这样的限制，且localStorage做到了永久储存。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生。

参考链接