前端学习：如何将数据存储到chrome浏览器localStorage中（详细）

知识调用

文章中可能用到的知识点
前端学习：浏览器缓存方式有哪些（ cookie localstorage sessionstorage）
如何查看Chrome浏览器的页面缓存内容【详细教程】
如何清除浏览器缓存（快捷键+手动）
cookie、sessionStorage和localStorage的区别（一）
cookie、sessionStorage和localStorage的区别（二）精简概念

---

核心干货

localStorage存储

localStorage.setItem('key',value)
// localStorage.setItem('键名'，键值)

在本地客户端存储一个字符串类型的数据，其中，第一个参数"键名"代表了该数据的标识符，而第二个参数"键值"为该数据本身。

localStorage.setItem('gungunxs',"666")
// 存储键名为gungunxs和键值为666的数据到本地

但有时value为一个对象Object，以上面的方式写入会出现读取的返回值为{object Object}的情况。但这并不是我们想要的。此时我们需要使用新的方式传入Object。

localStorage.setItem('param',JSON.stringify(Object))

通过JSON.stringify(Object)方法将对象转化为一个json格式的字符串进行存储

localStorage读取
我们通过以下方式来读取localStorage中的值

localStorage.getItem('key')
localStorage.getItem(键名)

读取已经存储在本地的数据，通过键名（这里是key）作为参数，读取出对应键名的数据。

var data = localStorage.getItem('gungunxs')
// 读取对应键名为gungunxs的数据

相对的在读取json格式字符串只有我们也无法直接使用，需要将它转换为josn对象之后才是我们想要的结果。所以我们需要调用 JSON.parse()方法来进行转化之后再继续使用。

JSON.parse(localStorage.getItem('key'))

localStorage删除
我们通过以下方法来删除对应key以及key中的内容

localStorage.removeItem('key')

localStorage清空所有的key

注意:请谨慎使用,它会清空所有的本地存储数据

localStorage.clear()

---

对于localStorage基本用法的介绍到这结束了

觉得这篇文章有用、对此感兴趣的小伙伴们

可以点赞➕收藏➕关注，方便后续跟进学习哦~