浏览器本地存储&&临时存储&&webStorage

1. localStorage

1.1 介绍

1.sessionStorage(临时存储)：为没一个数据维持一个存储区域，浏览器打开会创建，关闭浏览器就会消失。
2.localStorage(长期存储)：和前者一样，区别在于浏览器关闭后数据依然存在。

1.2 使用

放值：
localStorage.setItem('msg','hello!!!')

取值：

console.log(localStorage.getItem('msg'))

删除：

localStorage.removeItem('msg2')

全部清掉：

localStorage.clear()

1.3 代码示例

	
		
		
	
	
		
localStorage
		点我保存一个数据
		点我读取一个数据
		点我删除一个数据
		点我清空一个数据

		
	

2.sessionStorage

2.1 使用

放值：

sessionStorage.setItem('msg','hello!!!')

取值：

sessionStorage.log(localStorage.getItem('msg'))

删除：

sessionStorage.removeItem('msg2')

全部清掉：

sessionStorage.clear()

2.2 代码示例

	
		
		
	
	
		
sessionStorage
		点我保存一个数据
		点我读取一个数据
		点我删除一个数据
		点我清空一个数据

		
	

 3. webStorage

3.1 介绍

1. 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）

2. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。

3. 相关API：

   1. xxxxxStorage.setItem('key', 'value'); 该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

   2. xxxxxStorage.getItem('person');

      该方法接受一个键名作为参数，返回键名对应的值。

   3. xxxxxStorage.removeItem('key');

      该方法接受一个键名作为参数，并把该键名从存储中删除。

   4. xxxxxStorage.clear()

      该方法会清空存储中的所有数据。

4. 备注：

   1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。

   2. LocalStorage存储的内容，需要手动清除才会消失。

   3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。

   4. JSON.parse(null)的结果依然是null。

3.2 代码示例

3.2.1 保存

保存到localStorage，如果保存的是个对象，那么需要把数据转换为JSON格式，字符则不需要

/*保存*/
/*对象*/
var user = {
	name : 'admin',
	password: 'password'
}
/*字符*/
var str = 'hello';

localStorage.setItem("user",JSON.stringify(user)); //需要先转换为JSON

localStorage.setItem("hello",JSON.stringify(str));

 3.2.2 获取

/*对象*/
var user = localStorage.getItem("user"); //现在user是一个字符串
//如果需要读取user中对象则需要把user转换为一个对象
user = JSON.parse(user);
name = user.name

 3.2.3 删除

/*指定删除*/
localStorage.remove("user");
/*全部删除*/
localStorage.clear();