html5中sessionStorage和localStorage区别

        html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。

        sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储（半持久化的本地存储）。

        而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。其解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

        localStorage的优点：

        1）localStorage拓展了cookie的4K限制；

        2）localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的；

        3）localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

        localStorage的缺点：

        1）浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性；

        2）目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换；

        3）localStorage在浏览器的隐私模式下面是不可读取的；

        4）localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡；

        5）localStorage不能被爬虫抓取到。

        这两个对象，对外的方法主要有: setItem，getItem，以键值对的形式存储和读取，key按照索引获取当前存储的key值，找不到时返回null，length属性代表当前存储的key，value对数。

（1）setItem(key,value)：添加本地存储数据。两个参数，非常简单就不说了。
（2）getItem(key):通过key获取相应的Value。
（3）removeItem(key):通过key删除本地数据。
（4）clear():清空数据。

        代码示例(以localStorage为例)，更多关于localStorage用法可查看此文：http://menvscode.com/detail/5a2f7a0c10c98d0e654c1bd0

var username = 'helloworld';
var storageUsername;
var randomArr = [Math.random()，Math.random()，Math.random()，Math.random()];
var storageRandomArr;

//storage username，key值区分大小写，存入的内容为这个变量调用toString方法的结果
localStorage.setItem("username"，username);

//获取
storageUserName  = localstorage.getItem("username");
//"helloworld"

//删除
localStorage.removeItem("username");

storageUserName  =  localstorage.getItem("username");
// null

//存储对象时，可以先调用JSON.stringify方法，然后取出的时候再调用JSON.parse方法获取结果
localStorage.setItem("randomarr"，JSON.stringify(randomArrr));
storageRandomArr = JSON.parse(localStorage.getItem("randomarr"));

Object.prototype.toString.call(storageRandomArr);
// "object Array"

        cookie是一个用户通过浏览器浏览网站产出的信息的票根，Cookies通常被用来标示一个网站用户的浏览经历，它可能包含这个用户的个人偏好或访问这个网站的一些输入信息。用户可以自己随意操作他们浏览器中的Cookie。

        Cookies 可以通过服务端使用 Set-Cookie Http header来设置和修改，当然也可以使用javascript的document.cookie去操作。

        cookie的有效期：cookie默认情况下的有效期是很短暂的，一旦用户关闭浏览器，cookie保存的数据就会丢失。如果想要延长cookie的有效期，可以通过设置HTTP头信息中的cache-control属性的max-age值，或者修改HTTP头信息中的expires属性的值来延长有效期。

        cookie的作用域：它是通过文档源和文档路径来确定的。该作用域通过cookie的path和domain属性也是可配置的。默认情况下，cookie和创建它的web页面有关，并对该页面以及和该页面同目录或者子目录的其他页面可见。有时候，你可能希望让整个网站都能够使用cookie的值，而不管是哪个页面创建它。要满足这样的需求可以设置cookie的路径(设置cookie的path属性)。cookie的作用域默认由文档源限制。但是，有的大型网站想要子域之间能够互相共享cookie。

        cookie的数目和大小的限制：每个web服务器(域名)保存的cookie数不能超过50个，每个cookie保存的数据不能超过4KB，如果超过了4KB（IE6大约只能存储2K），服务器会处理不了。

        cookie的优点：能用于和服务器端通信；当cookie快要过期时，可以重新设置而不是删除。

        cookie的缺点：它会随着http头信息一起发送，增加了网络流量（文档传输的负载）；它只能储存少量的数据；它只能储存字符串；有潜在的安全问题。

        另外，自从有了Web Storage API(Local and Session Storage)，cookie就不被推荐用于存储数据了~

//读取网站下所有的cookie信息，获取的结果是一个以分号;作为分割的一个字符串
var allCookies = document.cookie;
//例如：在百度首页，获取的如下
// "BAIDUID=B32F2BF6BCB66D5559E199F5B1908F4C:FG=1; PSTM=1444711125; BIDUPSID=9DE77BD4B191F421CA54DB11C954067A; ispeed_lsm=0; MCITY=-289%3A; BDSFRCVID=hWtsJeC62Ag8XZc4Nvqo2MixJD2vkWoTH6aoB7vKuwGS_LREoJS6EG0PtvlQpYD-KiV2ogKK0eOTHvvP; H_BDCLCKID_SF=JbADoDD-JCvbfP0kKtr_MJQH-UnLq-vUbT7Z0l8KtqjJbMnL-TOF5R_eD4c0hUTRtjcW-b7mWIQHDp_65xRh5U-9BPvN04RZLbc4KKJxbPQSVtJXQKcvMq5XhUJiB5O-Ban7LtQxfJOKHICRe5-ajxK; BD_CK_SAM=1; locale=zh; BD_HOME=0; H_PS_PSSID=1455_18241_18559_17000_15227_11651; BD_UPN=123253"

//往原来的已经存在的cookie中加入新的cookie
document.cookie ="test=yui";

//当然也可以在后面加上可选择的选项键值对，例如domain，以及其他path，expires
document.cookie="test=yui;domain=.baidu.com"

//删除cookie，就是让这个cookie值得expires过，就是设置这个expires为0
document.cookie="test=yui;domain=.baidu.com;expires=0");