本地存储

一、初识本地存储
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);    
}

四、用localStorage存储对象

// 存
let stuObj = {
    name: stu.name,
    sex: stu.sex,
    id: stu.id
}
window.localStorage.setItem('stuParams', JSON.stringify(stuObj));

// 取
JSON.parse(window.localStorage.getItem('stuParams'));