cookie、localstorage、seesionStorage的区别与具体用法

==============================三者区别分析==============================================

cookie:

存储：存储在客户端，最大只能存 4kb的数据。

有效时间：可以设置有效时间。过期或者手动删除，就失效。是否失效与浏览器及窗口的打开和关闭无关。

数据与服务器之间的交互方式： cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端

localstorage:

存储：最大可以存储 5MB的数据。

有效时间：没有失效时间。可以长期存储。手动删除即失效。是否失效与浏览器及窗口的打开和关闭无关。

数据与服务器之间的交互方式：localstorage不会自动把数据发给服务器，仅在本地保存。

seesionStorage:

存储：最大可以存储5MB的数据。

有效时间：不能长期存储。手动删除或浏览器窗口关闭即失效。

数据与服务器之间的交互方式：sessionStorage不会自动把数据发给服务器，仅在本地保存。

==================================具体用法===================================================

1. cookie

var cookies = document.cookie: 读取所有的cookie对象
document.cookie = "key=val, expires=d.toGTMString(), path=/"; 增加/修改 cookie key的值

function setCookie(key,val,exdays) {
	var d = new Date();
	d.setTime(d.getTime() + (exdays*24*60*60*1000));
	document.cookie=key+"="+val+";"+"expires="+d.toGMTString();
}

function getCookie(key){
	var objs = document.cookie.split(";");
	for(var i = 0; i < objs.length; i++){
		var obj = objs[i].trim();
		if(obj.indexOf(key)==0) {
			return obj.substring(parseInt(key.length + 1), obj.length);
		} else {
			return "";
		}
	}
}

function checkCookie() {
	var user = getCookie("username");
	if(!user){
		user = prompt("请输入用户姓名", "");
		setCookie("username", user, 0.0001);	
	} else {
		alert("欢迎"+user+"再次光临");
	}
}

checkCookie();

2. localStorage

	alert("浏览器不支持localStorage");
} else {
	var storage = window.localStorage;
	
	// 新增/修改 localStorage 的三种方法
	storage.setItem('a', 111);
	storage['b'] = 222;			
	storage.c = 333;
	
	// 读取 localStorage 的三种方法
	console.log(storage.getItem('a'));
	console.log(storage['b']);
	console.log(storage.c);
	
	// 删除 localStorage 的多所有内容
	// storage.clear();
	
	// 删除某个键值对
	storage.removeItem('a');
	
	
	//  localStorage 会自动将 localStorage 转换成为字符串形式。
	// 使用 JSON.stringify() 这个方法，来将 JSON 转换成为 JSON 字符串。
	var data = {
		name: "Tony",
		age: "12",
		sex: "man"
	}
	storage.setItem('data', JSON.stringify(data));			
	console.log(storage.data);
	
	// 读取之后要将 JSON 字符串转换成为 JSON 对象，使用 JSON.parse() 方法：
	console.log(JSON.parse(storage.data));
	
}

3. sessionStorage

if(!window.sessionStorage){
	alert("浏览器不支持sessionStorage");
} else {
	var sessionStorage = window.sessionStorage;
	
	// 新增/修改 localStorage 的三种方法
	sessionStorage.setItem('a', 111);
	sessionStorage['b'] = 222;			
	sessionStorage.c = 333;
	
	// 读取 localStorage 的三种方法
	console.log(sessionStorage.getItem('a'));
	console.log(sessionStorage['b']);
	console.log(sessionStorage.c);
	
	// 删除 localStorage 的多所有内容
	// storage.clear();
	
	// 删除某个键值对
	sessionStorage.removeItem('a');	
	
	//  localStorage 会自动将 localStorage 转换成为字符串形式。
	// 使用 JSON.stringify() 这个方法，来将 JSON 转换成为 JSON 字符串。
	var data = {
		name: "Tony",
		age: "12",
		sex: "man"
	}
	sessionStorage.setItem('data', JSON.stringify(data));			
	console.log(sessionStorage.data);
	
	// 读取之后要将 JSON 字符串转换成为 JSON 对象，使用 JSON.parse() 方法：
	console.log(JSON.parse(sessionStorage.data));
	
}

cookie、localstorage、seesionStorage的区别 与 具体用法

猜你喜欢

cookie、localstorage、seesionStorage的区别与具体用法