localStorage 在实际项目中的理解与使用

 localStorage 本地存储，一般浏览器支持5M大小；

 将数据保存在本地，关闭页面后会永久保存在浏览器中，除非手动清除。

         存储    localStorage.setItem("key", "value")

   读取 localStorage.getItem("key")

   移除 localStorage.removeItem("key")

localStorage 存储

 $.ajax({
     url: url,  //接口api
     type: "get",
     contentType: "application/json",
     dataType: "text",
     data: {}, //接口参数
     success: (res) => {
        res = $.parseJSON(res) //使用$.parseJSON将json字符串转换为json对象
        var data = res.data   //定义data接收res.data
        localStorage.setItem("UserInformation", JSON.stringify(data))
    }
 });

1.   以上面 ajax 为例，首先，接口成功之后返回的 res 是 JSON 字符串格式；  

2.   我们想要取得 res 中 data 的值，就要先使用 $.parseJSON(res) 将其转为json对象；

3.   拿到 res.data 的值之后（在这里为了方便，定义了一个data来接收res.data的值）

      我们使用localStorage.setItem("UserInformation",data)的存储方法将res.data 的值存储到UserInformation 字段；

      但是我们会发现这样写的话读取的时候返回值为[object,object]，并不是我们想要的内容；

4.   所以我们要在存储的时候进行类型转换，因此需要使用 JSON.stringify(data) 将其转化成字符串存储；

      这样，便将数据通过localStorage存储在浏览器缓存中了。

 $.ajax({
     url: url,  //接口api
     type: "get",
     contentType: "application/json",
     dataType: "text",
     data: {}, //接口参数
     success: (res) => {
        res = $.parseJSON(res) //使用$.parseJSON将json字符串转换为json对象
        var data = res.data   //定义data接收res.data
        localStorage.setItem("UserInformation", JSON.stringify(data))
    }
 });

localStorage 读取

      如下图，在获取我们存储的 UserInformation 的值的时候，使用 localStorage.getItem() 方法即可。

      由于存储的时候转化为了字符串格式，为了方便使用，我们将其转化为JSON数组格式。

var UserInformation = JSON.parse(localStorage.getItem("UserInformation"))

localStorage 移除

       退出登录的时候，需要移除存储在浏览器中的登录信息等数据，使用localStorage.removeItem()删除 UserInformation 及其内容。

$('.login-out').on("click", function () {
    localStorage.removeItem("UserInformation");   // 移除存储信息 UserInformation
    layer.msg('退出登录成功', function () {
         window.location = '/View/page/login.html';
    });
});

最后，sessionStorage存储和localStorage存储类似，可查看以下博文了解。

Cookie、sessionStorage和localStorage的用法和理解_清清前端的博客-CSDN博客sessionStorage和localStorage理解和用法https://blog.csdn.net/qing_er_/article/details/126362020?spm=1001.2014.3001.5501