localstorage的用法

HTML5自带一种本地储存localstorage

HTML API

localstorage 在浏览器的 API 有两个：localStorage 和sessionStorage，存在于 window 对象中，localStorage应 window.localStorage，sessionStorage 对应 window.sessionStorage。
localStorage 和 sessionStorage 的区别主要是在于其生存期。

---

基本使用

• localstorage 的大小为5M

• 里的作用域指的是：如何隔离开不同页面之间的localStorage（总不能在百度的页面上能读到腾讯的localStorage吧，哈哈哈）。

• localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。

• sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。

---

生存期

localstorage：理论永久，不主动清空就不会消失。
sessionstorage：关闭当前阅览器（页面），就会被清空。

---

基本使用方法

localstorage隶属于window ，其储存的 数据类型为键值对 (Key-Value),chrome的开发工具中的Resources - Local Storage面板以及Resources - Session Storage面板里，可以看到当前域名下的localstorage数据。

我们一般使用setItem()和getItem()方法去设置和获取其值。

	localStorage.a = 3;//设置a为"3"
	localStorage["a"] = "sfsf";//设置a为"sfsf"，覆盖上面的值
	localStorage.setItem("b","isaac");//设置b为"isaac"
	var a1 = localStorage["a"];//获取a的值
	var a2 = localStorage.a;//获取a的值
	var b = localStorage.getItem("b");//获取b的值
	var model =  {
			m1 :a1,
			m2 : a2,
			m3 : b,
			length：4，
	}
	console.log(model);

因为localstorage是永久性的本地储存 ，所以，当关闭页面并更改为一下JS代码在输出
（即，不添加，直接输出localstorage中的数据）

var a1 = localStorage["a"];//获取a的值
	var a2 = localStorage.a;//获取a的值
	var b = localStorage.getItem("b");//获取b的值
	var model =  {
			m1 :a1,
			m2 : a2,
			m3 : b,
			length：4，
	}
	console.log(model);

输出结果同上。

---

JSON

其与JSON对象之间的转换

JSON.stringify(); // 将json格式的数据转换成JSON格式的字符串

var str = localStorage.getItem("data1");
var obj = JSON.parse(str);
console.log(obj);

JSON.stringify(); // 将json格式的数据转换成JSON格式的字符串

var str = localStorage.getItem("data1");
var obj = JSON.parse(str);
console.log(obj);