The difference between the specific use cookie, localstorage, seesionStorage of

============================== three discriminant analysis ================ ==============================

cookie:

Storage: stored on the client, you can only store a maximum of 4kb data.

Effective Time: You can set the effective time. Expired or manually deleted, it can fail. Whether the failure of the browser window and the opening and closing has nothing to do.

Interaction between the data and the server: cookie data will be automatically transmitted to the server, the server can also write cookie to client

localstorage:

Storage: The maximum 5MB of data can be stored.

Effective time: no dead time. It can be stored long-term. Manually delete lapse. Whether the failure of the browser window and the opening and closing has nothing to do.

Interaction between the data and the server: localstorage not automatically send data to a server, saved only locally.

seesionStorage:

Storage: The maximum 5MB of data can be stored.

Effective Date: not long-term storage. Or manually remove the browser window is closed lapse.

Interaction between the data and the server: sessionStorage not automatically send data to a server, saved only locally.

================================== ============== specific usage =====================================

1. cookie

var cookies = document.cookie: read all the cookie object
document.cookie = "key = val, expires = d.toGTMString (), path = /"; value-added / modified in the 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));
	
}

The difference between the specific use cookie, localstorage, seesionStorage of

Guess you like