JavaScript 存储对象的使用及区别

JavaScript 存储对象

Web 存储 API 提供了 sessionStorage （会话存储） 和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作。

存储对象属性
1.length 返回存储对象中包含多少条数据。

存储对象方法
1.key(n) 返回存储对象中第 n 个键的名称
2.getItem(keyname) 返回指定键的值
3.setItem(keyname, value) 添加键和值，如果对应的值存在，则更新该键对应的值。
4.removeItem(keyname) 移除键
5.clear() 清除存储对象中所有的键

sessionStorage

用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

实例：
使用 sessionStorage 创建一个本地存储的 name/value 对，name=“lastname” value=“Smith”, 然后检索 “lastname” 的值，并插入到 id=“result” 的元素上:

	// 存储
	sessionStorage.setItem("lastname", "Smith");
	// 检索
	document.getElementById("result").innerHTML = sessionStorage.getItem("lastname");

localStorage

用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
实例：
使用 localStorage 创建一个本地存储的 name/value 对，name=“lastname” value=“Smith”, 然后检索 “lastname” 的值，并插入到 id=“result” 的元素上:

	// 存储
	localStorage.setItem("lastname", "Smith");
	// 检索
	document.getElementById("result").innerHTML = localStorage.getItem("lastname");

关于存储

sessionStorage （会话存储） 和 localStorage（本地存储）在存储数据时都会强制转化为字符串，那么读取的数据自然也是字符串了。

针对上述情况我提供两种解决思路：
1.使用split()方法把一个字符串分割成字符串数组（存储对象读取的字符串总是以逗号连接）

	var str = 'a,b,c,d,e';
	var arr = str.split(',');
	console.log(arr); // ['a','b','c','d','e']

2.使用JSON对象提供的stringify()方法和parse()方法

	var obj = {name : '艾雅法拉'};
	var str = JSON.stringify(obj);
	//存储
	sessionStorage.obj = str;
	//检索
	var str = sessionStorage.obj;
	obj = JSON.parse(str);

localStorage存储的数据处于磁盘文件夹的位置

以谷歌为例：

C:\Users\Username\AppData\Local\Google\Chrome\User Data\Default\Local Storage