localStorage，sessionStorage和cookie的区别及使用

1、概述

sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web请求之间保存数据。
sessionStorage、localStorage、cookie都是在浏览器端存储的数据。

2、共同点

都是保存在浏览器端，且同源的。

3、区别

1. 传递方式：
   cookie在浏览器和服务器间来回传递；
   sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存；
2. 存储大小：
   localStorage<=5M；
   sessionStorage<=5M；
   cookie<4K；（ie内核浏览器占主流地位，且ie6仍占有相当大的市场份额，所以在程序中应当使用少于20个cookie，且不大于4k）
3. 有效性：
   localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
   sessionStorage：仅在当前浏览器窗口关闭前有效，不能持久保持；
   cookie：只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭也不会消失；
4. 共享机制：
   localStorage ：在所有同源窗口中都是共享的；
   sessionStorage：同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的；
   cookie：在所有同源窗口中都是共享的
5. 浏览器支持：
   sessionStorage的浏览器最小版本：IE8、Chrome 5。
6. 使用场景
   cookie：保存回话信息
   localStorage：持久保存的数据
   sessionStorage：拥有独立特性的数据

4、JS中使用

1. localStorage

localStorage.setItem("key","value");//存储变量名为key，值为value的变量
localStorage.key = "value"//存储变量名为key，值为value的变量

localStorage.getItem("key");//获取存储的变量key的值
localStorage.key;//获取存储的变量key的值

localStorage.removeItem("key")//删除变量名为key的存储变量

     2.sessionStorage

sessionStorage.setItem('testKey','这是一个测试的value值'); // 存入一个值
sessionStorage['testKey'] = '这是一个测试的value值';

essionStorage.getItem('testKey'); // => 返回testKey对应的值
sessionStorage['testKey']; // => 这是一个测试的value值

sessionStorage.removeItem(string key) //将指定的键名(key)从 sessionStorage 对象中移除。
sessionStorage.clear() //清除 sessionStorage 对象所有的项。

sessionStorage.length //返回一个整数，表示存储在 sessionStorage 对象中的数据项(键值对)数量。

      3.cookie

//写cookies
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}

//读取cookie
function getCookie(name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}

//删除cookie
function delCookie(name)
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null)
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}

//清除cookie
function clearCookie(name) {
setCookie(name, "", -1);
}