谈一谈localStorage、sessionStorage、Cookie的区别及用法

1、区别

特性	Cookie	localStorage	sessionStorage
数据的生命期	一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效	除非被清除，否则永远保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4k左右	一般为5MB
与服务器端通信	每次都会携带在HTTP头中，如果使用Cookie保存过多数据会存在性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性	需要程序员自己封装，原生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Obiect和Array有更好地支持
缺点	限制大小，数量有限； 每次随http请求一起发送，浪费宽带； 潜在的安全风险； 用户配置禁用就无法使用；	写入数据量大的话会卡； 在浏览器的隐私模式下不能读取； 不能被爬虫读取； 浏览器会在第一个请求的时候就将数据加载到内存中 (浪费用户内存RAM)； 不同窗口下数据；不能独立，相互干扰。例如：删除或添加一个数据，其它的窗口也会同步删除或者添加该数据	写入数据量大的话会卡； 在浏览器的隐私模式下不能读取； 不能被爬虫读取； 浏览器会在第一个请求的时候就将数据加载到内存中 (浪费用户内存RAM)；
优点	cookie机制将信息存储于用户硬盘，因此可以作为跨页面全局变量； 简单性，基于文件的轻量性； 数据持久性；	可以大量保存浏览器中数据； 不会随http请求一起发送；	可以大量保存浏览器中数据； 不同窗口下的sessionStorage，存储相互独立；互不干扰； 存储空间更大； 节省网络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie一样每次请求都会传送到服务器，所以减少了客户端和服务端的交互，节省了网络流量； 对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便； 安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说会比较高一些，不会担心截获，但是仍然存在伪造问题； WebStorage提供了一些方法，数据操作比cookie方便。

 

2、用法

localStorage和sessionStorage使用时使用相同的API：

 localStorage.setItem("key","value");//以“key”为名称存储一个值“value”

 localStorage.getItem("key");//获取名称为“key”的值

 localStorage.removeItem("key");//删除名称为“key”的信息。

 localStorage.clear();​//清空localStorage中所有信息

简单的举个例子来了解一下他们的用法 ：

网站首页上方宣传广告页，效果为第一次进入官网首页会出现广告，然后点击关闭，刷新网页不会再显示广告，但是当清除localStorage存入的数据，刷新网页会再显示广告。

localStorage方法：

html：

<div class="header">
    <div class="header-a">
        <a href=""></a>
        <i class="close">x</i>
    </div>
</div>    

 css：

.header{
    width:100%;
    height:80px;
    background:#000;
}
.header-a{
    width:1190px;
    margin:0 auto;
    position:relative;
    background:url("images/1.jpg") no-repeat;
}
.header-a a{
    width:100%;
    height:80px;
    display:block;
}
.close{
    cursor:pointer;
    color:#fff;
    position:absolute;
    top:5px;
    right:5px;
    background:rgb(129, 117, 117);
    width: 20px;
    text-align: center;
    line-height: 20px;
}    

js：

//localStorage方法
<script src="../js/jquery.min.js"></script>
function haxi(){
        //判断localStorage里有没有isClose
        if(localStorage.getItem("isClose")){             
            $(".header").hide();
        }else{
            $(".header").show();
        }
        //点击关闭隐藏图片存取数据
        $(".close").click(function(){
            $(".header").fadeOut(1000);

            localStorage.setItem("isClose", "1"); 
        })
}
haxi();

Cookie方法：

//Cookie方法
<script src="../js/cookie.js"></script>//引入自己封装的Cookie.js
function haxi(){
        if(getCookie("isClose")){             
            $(".header").hide();
        }else{
            $(".header").show();
        }
        
        $(".close").click(function(){
            $(".header").fadeOut(1000);

            setCookie("isClose", "1","s10");
        })
}
haxi();

封装的cookie.js:

 
/*
**	setCookie 		添加一个cookie
**	params 	
** 			name 	[String]
** 			value 	[String]
** 			iDay 	[Number]
*/
function setCookie(name,value,iDay){
	if(iDay){
		//设置过期时间
		var oDate = new Date();
		oDate.setDate(oDate.getDate()+iDay);
		document.cookie = name+'='+value+'; PATH=/; EXPIRES='+oDate.toGMTString();
	}else{
		//默认不设置过期时间
		document.cookie = name+'='+value+'; PATH=/';
	}
}
 
/*
** 	getCookie 		获取一个cookie
** 	params
** 				name 		[String]
*/
function getCookie(name){
	//name=李四; age=18; sex=男; weight=50
	var arr = document.cookie.split('; ');
	for(var i=0;i<arr.length;i++){
		var arr2 = arr[i].split('=');
		if(arr2[0]==name){
			return arr2[1];
		}
	}
}
/*
** 	removeCookie 		删除一个cookie
** 	params
** 				name 		[String]
*/
function removeCookie(name){
	addCookie(name,1,-1);
}