sessionstorage，localstorage和cookie之间的区别以及各自的用法

由于年前辞了自己的工作，年后又开始重新找工作，参加了好几次面试，居然都遇到了同样的面试题：sessionstorage，localstorage和cookie之间的是区别？

当然，在面试的时候答的也不是很完善，所以想整理一下，以便后续面试中遇到。

区别：

1，cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。

2，存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

3，数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

4，作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

 

在服务器端存储数据经常用session，所以经常也遇到这样的问题：cookie 和session 的区别？

 

1、cookie数据存放在客户的浏览器上，session数据放在服务器上。

2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
   考虑到安全应当使用session。

3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
   考虑到减轻服务器性能方面，应当使用COOKIE。

4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

知道这些区别以后，还得知道他们的用法：

cookie的用法：

在这里我们使用jquery封装的方法。所以先得引入两个js

首先包含jQuery的库文件，在后面包含 jquery.cookie.js 的库文件。 

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> 

<script type="text/javascript" src="js/jquery.cookie.js"></script> 

使用方法 

创建一个会话cookie：

$.cookie(‘cookieName’,'cookieValue’);

注：当没有指明cookie时间时，所创建的cookie有效期默认到用户浏览器关闭止，故被称为会话cookie。

创建一个持久cookie：

$.cookie(‘cookieName’,'cookieValue’，｛expires：7｝);

注：当指明时间时，故称为持久cookie，并且有效时间为天。

创建一个持久并带有效路径的cookie：

$.cookie(‘cookieName’,'cookieValue’，｛expires：7，path：’/'｝);

注：如果不设置有效路径，在默认情况下，只能在cookie设置当前页面读取该cookie，cookie的路径用于设置能够读取cookie的顶级目录。

创建一个持久并带有效路径和域名的cookie：

$.cookie(‘cookieName’,'cookieValue’，｛expires：7，path：’/'，domain: ‘chuhoo.com’，secure: false，raw:false｝);

注：domain：创建cookie所在网页所拥有的域名；secure：默认是false，如果为true，cookie的传输协议需为https；raw：默认为false，读取和写入时候自动进行编码和解码（使用encodeURIComponent编码，使用decodeURIComponent解码），关闭这个功能，请设置为true。

4.读取cookie： 

$.cookie('the_cookie'); // cookie存在 => 'the_value' 

$.cookie('not_existing'); // cookie不存在 => null 

5.删除cookie，通过传递null作为cookie的值即可： 

$.cookie('the_cookie', null); 

localStorage和sessionStorage的用法：

1，保存数据：localStorage.setItem(key,value); 

sessionStorage.setItem("key", "value");
localStorage.setItem("site", "js8.in");

2，读取数据：localStorage.getItem(key) ；

var value = sessionStorage.getItem("key"); 
var site = localStorage.getItem("site");

3，删除数据：删除数据：localStorage.removeItem(key)

sessionStorage.removeItem("key"); 
localStorage.removeItem("site");

4，clear清除所有的key/value：clear();

sessionStorage.clear(); 
localStorage.clear();

5，获取localStorage的属性名称（键名称）：localStorage.key(index)。

6，获取localStorage中保存的键值对的数量：localStorage.length。