本地存储

一、初识本地存储
sessionStorage和localStorage保存的数据，都以“键值对”的形式存在，以文本格式保存。
二、本地存储的优劣
1、优点
A、存储大小
每个域名的存储上限视浏览器而定，Chrome是2.5MB，Firefox和Opera是5MB，IE是10MB。
B、不增加流量
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
C、有效期
localStorage，永不过期，除非自动删除；
sessionStorage，关闭浏览器，重新打开页面，就会失效。
D、作用域
sessionStorage在不同浏览器窗口中无法共享，即使是同一个页面；
localStorage在所有同源窗口中都是共享的。
E、对开发者友好
对开发者比较友好，有现成的方法可以使用。
2、缺点
A、兼容性
sessionStorage和localStorage不支持低版本IE浏览器。
B、安全性
目前localStorage没有对XSS攻击有任何抵御机制，一旦出现XSS漏洞，那么存储在localStorage里的数据就极易被获取到。
三、本地存储的方法

1、是否支持本地存储

function checkStorageSupport() {
// sessionStorage
if (window.sessionStorage) {
return true;
} else {
return false;
}

// localStorage
if (window.localStorage) {
return true;
} else {
return false;
}
}

2、设置本地存储

sessionStorage.setItem("key","value");
localStorage.setItem("key","value");

3、获取本地存储

var valueSession = sessionStorage.getItem("key");
var valueLocal = localStorage.getItem("key");

4、删除本地存储

sessionStorage.removeItem('key');
localStorage.removeItem('key');

5、清空本地存储

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

6、遍历存储的数据

for(var i = 0; i < localStorage.length; i++){
console.log(localStorage.key(i));
}

7、监听存储数据

window.addEventListener("storage",onStorageChange);
function onStorageChange(e) {
console.log(e.key);
}