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的方法: 1,代码删除: localStorage.clear()
2,或者直接:
1. 对象转为字符串
const obj = {
id: 0,
name: '张三',
age: 12
}
const objToStr = JSON.stringify(obj)
console.log('obj:', obj)
console.log('objToStr:', objToStr)
2. json字符串转为对象
const str = '{"id":0,"name":"张三","age":12}'
const strToObj = JSON.parse(str)
console.log('str:', str)
console.log('strToObj:', strToObj)