localStorage和sessionStorage的区别

//在chrome测试的结果;

知识点1：localStorage和sessionStorage的区别; localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。 sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了

localStorage支持5M大小的存储，并且一次请求就能存储在localStorage；以后的每次调用都是直接从localStorage读取数据，不必再此请求接口，节省时间。

以下是代码：首先判断localStorage中是否存在HuBeiMap对象，

localStorage. length : 返回现在已经存储的变量数目。
localStorage. key(n) : 返回第n个变量的键值(key)。
localStorage.getItem(k) : 和localStorage.k一样，取得键值为k的变量的值。
localStorage.setItem(k , v) : 和localStorage.k = v一样，设置键值k的变量值。
localStorage.removeItem(k) : 删除键值为k的变量。
localStorage.clear() : 清空所有变量

　　1，如果不存在则请求接口，在得到数据之后，将数据放入localStorage（localStorage["HuBeiMap"] = JSON.stringify(res.data)）；

　 2，如果存在HuBeiMap对象，则直接从中读取数据（this.jsonData = localStorage.HuBeiMap）

if (!localStorage.HuBeiMap) {
      this.axios
       .get("http://192.168.101.42:8080/hg6000/fdcdsj/jcyjDtJwdSj", {
          params: {}
        })
        .then(res => {
          this.jsonData = res.data;
          localStorage["HuBeiMap"] = JSON.stringify(res.data);
          this.HBS();
        })
        .catch(function(error) {
          console.log(error);
        });
    } else {
      this.jsonData = localStorage.HuBeiMap;
      this.HBS();
    }

========================================

可在浏览器的控制台中查看储存的数据：

localStorage和sessionStorage的区别

=====================================

清除localStorage的方法： 1，代码删除： localStorage.clear()

　　2，或者直接：

localStorage和sessionStorage的区别

1. 对象转为字符串

const obj = {
     id: 0,
     name: '张三',
     age: 12
}
const objToStr = JSON.stringify(obj)
console.log('obj:', obj)
console.log('objToStr:', objToStr)

localStorage和sessionStorage的区别

2. json字符串转为对象

const str = '{"id":0,"name":"张三","age":12}'
const strToObj = JSON.parse(str)
console.log('str:', str)
console.log('strToObj:', strToObj)

localStorage和sessionStorage的区别

localStorage和sessionStorage的区别

localStorage和sessionStorage的区别

1. 对象转为字符串

2. json字符串转为对象

相关推荐