cookie、本地存储（localStorage、sessionStorage）用法、设置、查看位置及区别

HTML5之前的存储：cookie

设置cookie：

  	
  	


	

		用户名：
		密码：
		
		清除记录
	
		
	
  	

上述代码包含设置、读取、清除cookie。

运行后：

在谷歌上检查设置的cookie，发现设置是正常的。检查方法可以看这篇文档。

同时，这里也设置了时长：

cookie存储永久数据存在这几个问题：

大小：cookie的大小被限制在4KB。

带宽：cookie是随HTTP事务一起被发送的，因此会浪费一部分发送cookie时使用的带宽。

复杂性：要正确的操作cookie是很困难的。

 

Web Storage

实现数据存储的实例：

html部分：

	
		
		
	
	
		
webStorage示例
		

		
		
		
	

HTML5之后的存储：sessionStorage

将数据保存到session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间，session对象可以用来保存在这段时间内所要求保存的任何数据。

sessionStorage.setItem('key','value');
//或
sessionStorage.key = 'value';
 
//读取数据的方法
变量 = sessionStorage.getItem('key');
//或
变量 = sessionStorage.key;

在使用sessionStoage存储数据时，

function saveStorage(id){
	var target = document.getElementById(id);
	var str = target.value;
	sessionStorage.setItem("message",str);
	//或sessionStorage.message = str;
	console.log(sessionStorage);
}
function loadStorage(id){
	var target = document.getElementById(id);
	var msg = sessionStorage.getItem("message");
	// 或 var msg = sessionStorage.message;
	target.innerHTML = msg;
}

存储的结果：

 

 

HTML5之后的存储：localStorage

设置

将数据保存到客户端本地的硬件设备（硬盘或其他）中，即使浏览器被关闭，该数据仍然存在，下次打开浏览器访问网站仍然可以继续访问。

localStorage.setItem('key','value');
//或
localStorage.key = 'value';
 
//读取数据的方法
变量 = localStorage.getItem('key');
//或
变量 = localStorage.key;

在使用localStorage存储数据时：

function saveStorage(id){
	var target = document.getElementById(id);
	var str = target.value;
	localStorage.setItem("message",str);
	//localStorage.message = str;
	console.log(localStorage);
}
function loadStorage(id){
	var target = document.getElementById(id);
	var msg = localStorage.getItem("message");
	// 或 var msg = localStorage.message;
	target.innerHTML = msg;
}

与sessionStorage存储位置一致。

在浏览器查看，打开调试工具(F12)，在application选项卡下可以查看。

localStorage作为客户端浏览器持久化存储方案

存储位置

这个是浏览器隔离的，每个浏览器都会把localStorage存储在自己的UserData中，如chrome一般就是

C:\Users\你的计算机名\AppData\Local\Google\Chrome\User Data\Default\Local Storage\leveldb

下的文件003140.log 看到存储的数据 testtest：

 

 

区别

localStorage和sessionStorage的相同点：

• 共同方法key、setItem、getItem、removeItem、clear()等方法。
• 都是用来存储客户端临时信息的对象。
• 他们均只能存储字符串类型的对象
• 存储大小都为5M
• 都遵守同源策略

下图是在浏览器内sessionStorage对象内的方法：

不同点：

• sessionStorage为临时保存，浏览器关闭则失效，localStorage为永久保存。
• localStorage 在同源的不同窗口下可共享，在不同浏览器中不可共享
• sessionStorage 在同源的不同窗口下不可共享。注意这里的不同窗口是指浏览器另起一窗口，并不是指页面路由跳转