本地存储sessionStorage与localStorage

• sessionStorage 数据的存储仅特定于某个会话中，也就是说数据只保持到浏览器关闭，当浏览器关闭后重新打开这个页面时， 之前的存储已经被清除。
• localStorage 是一个持久化的存储，它并不局限于会话。除非主动删除数据，否则数据是永远不会过期的。

一、localStorage和sessionStorage操作

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

1.setItem存储value

sessionStorage.setItem("name", "hzzly");
localStorage.setItem("blog", "hzzly.github.io");

2.getItem获取value

let name = sessionStorage.getItem("name");
let blog = localStorage.getItem("blog");

3.removeItem删除key

sessionStorage.removeItem("name");
localStorage.removeItem("blog");

4.clear清除所有的key/value

sessionStorage.clear();
localStorage.clear();

5.其他操作方法：点操作和[]

web Storage不但可以用自身的setItem,getItem等方便存取，也可以像普通对象一样用点(.)操作符，及[]的方式进行数据存储及读取，像如下的代码：

//存
localStorage.name = "hzzly"; 
localStorage["age"] = "21"; 
sessionStorage.name = "hzzly"; 
sessionStorage["age"] = "21";
//取
let name1 = localStorage.name
let age1 = localStorage["age"]
let name2 = sessionStorage.name
let age2 = sessionStorage["age"]

6.localStorage和sessionStorage的key和length属性实现遍历

sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历，例如下面的代码：

var storage = window.localStorage; 
for (var i=0, len = storage.length; i  <  len; i++){     
	let key = storage.key(i);     
	let value = storage.getItem(key);     
	console.log(key + "=" + value); 
}

二、实例

storage只能存储字符串的数据，对于JS中常用的数组或对象却不能直接存储，可以用下面两个方法进行转换：

• JSON.stringify() 用于从一个对象解析出字符串
• JSON.parse() 用于从一个字符串中解析出json对象

1.localStorage/sessionStorage存取数组

//存
let language = ['HTML/HTML5', 'CSS/CSS3', 'JavaScript', 'Vue', 'React']
localStorage.language = JSON.stringify(language)
sessionStorag.language = JSON.stringify(language)
//取
let storageLanguage = JSON.parse(localStorage.language)

2.localStorage存取对象

//存
let myInfo = {
	'name': 'hzzly',
	'age': 21,
	'school': 'ECUT',
	'city': 'NanChang'
}
localStorage.myInfo = JSON.stringify(myInfo)
sessionStorag.myInfo = JSON.stringify(myInfo)
//取
let storageLanguage = JSON.parse(localStorage.myInfo)