Vue_2 --- 操作浏览器的本地存储

0. 概述

搜索历史记录的存储

1. localStorage

关闭浏览器,localStorage不会清空

1.1 增

// 存储字符窜
window.localStorage.setItem("name","小明")   // 保存到localStorage的都是字符串

// 存数值类型也会转成字符串,底层调的 toString()
window.localStorage.setItem("age",18)

// 存对象,需要转成Json
let p = {name:"张三",age:18}
window.localStorage.setItem("person",JSON.stringify(p))

1.2 删

window.localStorage.removeItem("name")

1.3 清空

window.localStorage.clear()

1.4 查

window.localStorage.getItem("name")

window.localStorage.getItem("age")  // 读出来的为字符串

JSON.parse(window.localStorage.getItem("person"))   // Josn串转成对象,JSON.parse(null) 也是null

// 读不到就是 null
window.localStorage.getItem("xxx")

2. sessionStorage

关闭浏览器会清空sessionStorage

2.1 增

// 存储字符窜
window.sessionStorage.setItem("name","小明")   // 保存到localStorage的都是字符串

// 存数值类型也会转成字符串,底层调的 toString()
window.sessionStorage.setItem("age",18)

// 存对象,需要转成Json
let p = {name:"张三",age:18}
window.sessionStorage.setItem("person",JSON.stringify(p))

2.2 删

window.sessionStorage.removeItem("name")

2.3 清空

window.sessionStorage.clear()

2.4 查

window.sessionStorage.getItem("name")

window.sessionStorage.getItem("age")  // 读出来的为字符串

JSON.parse(window.sessionStorage.getItem("person"))   // Josn串转成对象,JSON.parse(null) 也是null

// 读不到就是 null
window.sessionStorage.getItem("xxx")

3. 总结

1. localStorage 和 sessionStorage 统称为 webStorage
2. 存储内容大小一般支持5MB(不同的浏览器可能不一样)
3. 浏览器端通过 Window.localStorage和Window.sessionStorage属性来实现本地存储机制
4. sessionStorage 存储的内容会随着浏览器窗口关闭而消失
5. localStorage 存储的内容需要手动清除或调用clear() 或 removeItem() 来清除
6. getItem(xxx) 如果获取不到对应的value,得到的返回值是null
7. JSON.parse(null) 的结果还是null