localstorage和sessionstorage和cookie的区别

localstorage和sessionstorage和cookie

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

sessionStorage用法：

sessionStorage.setItem('key', 'value');  //存储数据
sessionStorage.getItem('key'); 			 //取出数据
sessionStorage.setItem('key', 'newVal'); //修改数据
sessionStorage.removeItem('key'); 		 //删除数据
sessionStorage.clear();   				 //清除数据
 

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

localStorage用法：

localStorage.setItem('key', 'value');  	 //存储数据
localStorage.getItem('key');			 //取出数据
localStorage.setItem('key', 'newVal');	 //修改数据
localStorage.removeItem('key');			 //删除数据
localStorage.clear();					 //清除数据

web storage和cookie的区别
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

cookie用法

window.document.cookie = 'xxx';			 //存储数据
window.document.cookie = 'xxx';			 //取出数据

Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

cookie封装

function setCookie(name,value,n){
	var oDate = new Date();
	oDate.setDate(oDate.getDate()+n);
	document.cookie = name+"="+value+";expires="+oDate;
}

function getCookie(name){
	var str = document.cookie;
	var arr = str.split("; ");
	for(var i = 0; i < arr.length; i++){
		//console.log(arr[i]);
		var newArr = arr[i].split("=");
		if(newArr[0]==name){
			return newArr[1];
		}
	}
}

function removeCookie(name){
	setCookie(name,1,-1);
}