JS--本地存储

基础认知

localstorage可以说是对cookie的优化，使用它可以方便在客户端存储数据，并且不会随着HTTP传输，说到这里就要跟sessionStorage 做一下区分！！

localStorage 和 sessionStorage 属性都允许在浏览器中存储 key/value 对的数据。但是localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。
不过他们的一些方法是相似的！！

使用

我们先讲sessionStorage的存储，获取与删除：

存储–Storage.setItem()

setItem() 作为 Storage 接口的方法，接受一个键名和值作为参数，将会把键名添加到存储中，如果键名已存在，则更新其对应的值。

获取–Storage.getItem()

getItem() 作为 Storage 接口的方法，接受一个键名（key name）作为参数，并返回对应键名的值

清除–clear()

clear() 是 Storage 接口的一个方法，调用它可以清空存储对象里所有的键值。

		const a=123;
        sessionStorage.setItem('a',a);
        /*这里面'a'是键名，a是值*/
        console.log(sessionStorage.getItem('a'));
        sessionStorage.clear('a');
        console.log(sessionStorage.getItem('a'));

然后是localstorage的使用

这个跟sessionStorage的使用可以说是一模一样！
直接给例子：

		const a=123;
        localStorage.setItem('a',a);
        console.log(localStorage.getItem('a'));
        localStorage.clear('a');

特殊情况

我们上面讲的要存储的值的数据类型都是比较简单的，而如果我们是要存储从接口中获取的数据并进行一些使用，可能还需要经过一些别的处理！！
这里强调下接口获取的数据一般是字符串形式！！
这里可以参考我前一篇文章:ajax的使用
这里我们调用接口的时候一般都会用JSON.parse()将数据由字符串转成json对象，不过这个没办法用localStorage进行存储，所以我们要进行以下调整：
用localStorage.setItem()正确存储JSON对象方法是：

1. 存储前先用JSON.stringify()方法将json对象转换成字符串形式
2. 后续要操作该JSON对象，要将之前存储的JSON字符串通过JSON.parse()先转成JSON对象再进行操作

不过这种方法化来化去很麻烦，所以直接按照我之前那篇文章直接存储字符串形式的就行了！

var xmlhttp;
if (window.XMLHttpRequest) {
  xmlhttp = new XMLHttpRequest();
} else {
  xmlhttp = new ActiveXObject("Microsoft XMLHTTP");
}

xmlhttp.open("GET", "https://recruit-exam.topviewclub.cn/api/recruit/getBannerList", true);

xmlhttp.send();
xmlhttp.onreadystatechange = function () {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
   let responseText = JSON.parse(xmlhttp.responseText);
   /*这里setItem存储的是字符串，不能存json对象！！*/
    localStorage.setItem('msg', xmlhttp1.responseText);
        console.log(localStorage.getItem('msg'));
  }
}