浅谈cookie、sessionStorage 和 localStorage

cookie和session都是用来跟踪浏览器用户身份的会话方式。

cookie与session的区别：cookie数据保存在客户端，session数据保存在服务器端。

如果web服务器端使用的是session，那么所有的数据都保存在服务器上，客户端每次请求服务器的时候会发送当前会话的sessionid，服务器根据当前sessionid判断相应的用户数据标志，以确定用户是否登录或具有某种权限。由于数据存储在服务器上面，所以不能伪造，但如果能够获取某个登录用户的sessionid，用特殊的浏览器伪造该用户的请求也是能够成功的。

如果浏览器使用的是cookie，那么所有的数据都保存在浏览器端，当你再次请求服务器的时候，浏览器会将用户名一块发送给服务器，这些变量有一定的特殊标记。服务器会解释为cookie变量，所以只要不关闭浏览器，那么cookie变量一直是有效的，所以能够保证长时间不掉线。如果能够截获某个用户的cookie变量，将cookie拷贝到自己的浏览器目录下，就可以以盗用的身份登录，伪造一个数据包发送过去，那么服务器还是认为是合法的。所以，使用cookie被攻击的可能性比较大。

cookie是网站为了标示用户身份，进行session跟踪而储存在用户本地终端（Client Side）上的数据（有时也用cookies，通常经过加密）。

对于网络化编程，一般将持久化存储一些有用数据这项任务交给了服务器端的数据库或者浏览器端的cookie。随着HTML5的出现，web开发又有了两种选择：Web Storage和Web SQL Database。

Web Storage有两种形式：localStorage（本地存储）和sessionStorage（会话存储）。

localStorage：本地存储，存储持久数据，没有时间限制，浏览器关闭后数据不丢失，除非主动删除数据，主要用来解决cookie读写困难、存储容量有限的问题。

sessionStorage：会话存储，针对一个session的数据存储，当用户关闭浏览器窗口后，数据会被删除。

使用 local storage和session storage主要通过在JS中操作这两个对象来实现，分别为window.localStorage和window.sessionStorage。这两个对象均是Storage类的两个实例，自然也具有Storage类的属性和方法。

localStorage属性和方法：

localStorage.length	获得localStorage的个数
localStorage.key(n)	获得localStorage第n个键值对的键
localStorage.key = value	设置键值对
localStorage.setItem(key, value)	添加或修改相应的localStorage
localStorage.getItem(key, value)	获取相应的localStorage
localStorage.removeItem(key, value)	移除相应的localStorage
localStorage.clear()	移除所有同源的localStorage

sessionStorage属性和方法：

sessionStorage.length	获得sessionStorage的个数
sessionStorage.key(n)	获得sessionStorage第n个键值对的键
sessionStorage.key = value	设置键值对
sessionStorage.setItem(key, value)	添加或修改相应的sessionStorage
sessionStorage.getItem(key, value)	获取相应的sessionStorage
sessionStorage.removeItem(key, value)	移除相应的sessionStorage
sessionStorage.clear()	移除当前会话的sessionStorage

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

function setCookie(name,value) {
	var days = 30;
	var expires = new Date();
	expires.setTime(expires.getTime() + days*24*60*60*1000);
	document.cookie = name + "="+ escape(value) + ";expires=" + expires.toGMTString();
}

function getCookie(name) {
	var start = document.cookie.indexOf(name + "="); 
	var len = start + name.length + 1; 
	if (start == -1) 
		return null; 
	var end = document.cookie.indexOf(';', len); 
	if (end == -1) 
		end = document.cookie.length; 
	return unescape(document.cookie.substring(len, end)); 
}

cookies、sessionStorage 和 localStorage的异同点：

1）共同点：

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

2）不同点：

①　数据传递

cookie数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递。

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

②　存储大小

cookie数据大小不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。

sessionStorage和localStorage 虽然也有存储大小的限制，但Web Storage数据完全存储在客户端，不需要通过浏览器的请求将数据传给服务器，因此相比cookie来说能够存储更多的数据，可以达到5M或更大。

③　有效时间

localStorage存储持久数据，没有时间限制，浏览器关闭后数据不丢失，除非主动删除数据。

sessionStorage数据在当前浏览器窗口关闭后自动删除。

cookie在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

④　作用域

sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面。

localStorage 和cookie在所有同源窗口中都是共享的。

cookie的安全性问题：

cookie信息是以明文文本的形式保存在客户端的计算机中的，如果能够截获某个用户的cookie变量，将cookie拷贝到自己的浏览器目录下，就可以以盗用的身份登录，伪造一个数据包发送过去，那么服务器还是认为是合法的。所以，使用cookie被攻击的可能性比较大，最好不要用cookie保存敏感的，未加密的信息，否则会影响网站的安全性。

localStorage的安全性问题：

目前localStorage存储没有对XSS攻击有任何抵御机制，一旦出现XSS漏洞，那么存储在localStorage里的数据就极易被获取到，只要攻击者注入某些代码，就可以获取使用localStorage存储在本地的所有信息，也可以简单的使用localStorage.removeItem(key)和localStorage.clear()对存储数据进行清空。

使用localStorage的时候，需要时刻注意是否有代码存在XSS注入的风险。千万不要用localStorage存储系统中的身份验证信息或敏感信息。