最详细：浏览器存储webStorage——本地存储localStorage&会话存储sessionStorage

一、webStorage是什么？

webStorage是localStorage和sessionStorage的统称，存储内容大小一般为5MB左右（不同浏览器不一样），浏览器通过window.localStorage和window.sessionStorage属性来实现本地存储机制。

二、本地存储localStorage相关的四个API

1.API1——localStorage.setItem('key','value')

使用localStorage.setItem('key','value')可以把数据存储在浏览器缓存里，如果键名‘key’已存在，则更新其对应的值‘value’。现有三个数据，第一个是一个字符串（message1），第二个是一个数字（message2），第三个是一个对象（dog）。

例如：

let dog = { name: "蒂卡尔", age: 3 };
function saveData() {
    localStorage.setItem('message1', 'shanghai')
    localStorage.setItem("message2", 999)
    localStorage.setItem("dog", dog)
}

在浏览器中的存储如下：

由上图可知，在存储message2和dog时，进行了toString()处理，导致存储的数据类型发生了改变，数字变为字符串类型倒没什么大问题，对象类型的数据则不行，解决方法如下：

localStorage.setItem("dog", JSON.stringify(dog))

使用JSON.stringify()把对象变为字符串的形式，并且可以体现该对象的内容，效果如下：

2.API2——localStorage.getItem('key')

使用localStoage.getItem('key')可以把存储在浏览器缓存里的数据读取出来，数据项同上，返回值为该键名对应的值。

扫描二维码关注公众号，回复： 17224989 查看本文章

例如：

function readData() {
   console.log(localStorage.getItem("message1"))
   console.log(localStorage.getItem("message2"))
   console.log(localStorage.getItem("dog"))
}

控制台输出读取结果如下：

但是我们希望可以读取对象类型数据为对象类型，因此要使用JSON.parse()对读取结果进行解析，修改后代码如下：

result = localStorage.getItem("dog")
console.log(JSON.parse(result))

控制台输出读取结果如下：

3.API3——localStorage.removeItem('key')

使用localStorage.removeItem('key')可以删除存储在浏览器缓存里的指定数据，数据项同上，返回值为该键名对应的值。

例如，删除第一个数据message1：

function deleteData() {
   localStorage.removeItem("message1");
}

在浏览器中的存储如下：

4.API4——localStorage.clear()

使用localStorage.clear()可以把存储在浏览器缓存里所有数据全部清空，数据项同上。

例如：

function clearData() {
  localStorage.clear();
}

在浏览器中的存储如下：

注意：

1.如果读取的数据项不存在，则后台直接读取出的是null，而不会报错，即localStoage.getItem('key')中key对应的value获取不到，则其返回值是null，如下：

数据项message3不存在，依然进行读取：
      function readData() {
        console.log(localStorage.getItem("message1"))
        console.log(localStorage.getItem("message2"))
        console.log(localStorage.getItem("message3"))
        result = localStorage.getItem("dog")
        console.log(JSON.parse(result))
      }
控制台输出读取结果如下：

2.如果JSON.parse()解析的数据为null，则解析后的数据也是null，而不会报错，即JSON.parse(null)的结果为null，如下：

定义result2 = localStorage.getItem(null)，此时要解析的数据result2是null：
      function readData() {
        console.log(localStorage.getItem("message1"))
        console.log(localStorage.getItem("message2"))
        result = localStorage.getItem("dog")
        result2 = localStorage.getItem(null)
        console.log(JSON.parse(result))
        console.log(JSON.parse(result2))
      }
控制台输出读取结果如下：

3.关闭浏览器后再打开，存储的数据依然存在，因此必须手动清除才会消失。

三、会话存储sessionStorage相关的四个API

sessionStorage的API和用法与localStorage一样，只不过把API中的“localStorage”改为“sessionStorage”即可。

注意：

关闭浏览器后，会话存储存储的数据不会保存，在此打开时数据不存在了。