webStorage之localStorage和sessionStorage

webStorage之localStorage和sessionStorage

1. localStorage和sessionStorage相关说明：

这两个Storage是HTML5新增加的，使用频繁，在客户端以键值对的形式存储。
共同点：
	都是存储在客户端也就是浏览器，存储的数据大小是5M左右，有时视浏览器决定。
	比cookie的4K大了很多。
不同点：
	存储的时间不一样。
localStorage生命周期可以说是永久，除了主动执行api清除或手动清除浏览器缓存以外，一直在客户端；
sessionStorage生命周期和当前页面有关，关闭当前页面或者是关闭浏览器，数据就被清除掉。

具体用法：
	两个的用法基本一致，具体就是保存到本地、从本地取出来、删除存储的数据、清除全部。
# 存放数据
	xxxStorage.setItem('name','张三');
# 获取数据	
	xxxStorage.getItem('name');
# 移除单个数据	
	xxxStorage.removeItem('name');
# 移除所有数据	
 	xxxStorage.clear();

2. 使用实例：

2-1 4个Api之setItem，getItem，removeItem，clear

localStorage和sessionStorage是以字符串格式存储到本地的

// 2-1 localStorage的用法

//保存到本地,第一个参数是变量名，第二个是值
localStorage.setItem('name','张三');
//从本地取出，只有一个参数，存储的变量名
localStorage.getItem('name');
//删除某一个存储的数据
localStorage.removeItem('name');
//清除所有的数据
localStorage.clear();

// 2-2 sessionStorage的用法，参考localStorage的用法
sessionStorage.setItem('name','李四');
sessionStorage.getItem('name');
sessionStorage.removeItem('name');
sessionStorage.clear();

2-2 实际项目中可能会出现需要存储数组或者是对象，使用JSON格式转换；

//保存  JSON.stringify 
setStorage(key,value){
    localStorage.setItem(key,JSON.stringify(value))
};
//取出 JSON.parse()
getStorage(key){
    return JSON.parse(localStorage.getItem(key))
};