link之家

链接快照平台

关于localStorage的存储,读取,删除

2022-04-06 10:57:16 作者：沈胖三

这篇文章主要介绍了关于localStorage的存储，读取，删除方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

localStorage的存储,读取,删除

我们通过以下方式将数据储存到localStorage中

window.localStorage.setItem('key',value)

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

传入Object

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

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

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

window.localStorage.getItem('key')

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

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

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

window.localStorage.removeItem('key')

localStorage清空所有的key

清空localStorage中所有的key;

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

window.localStorage.clear()

localStorage 和 sessionStorage 一样，都是 HTML5 中最新引入的 Web 存储 API。

Web 存储 API，英文为 Web Storage API，通过它可以方便地在用户浏览器中存储键值对。

Web 存储 API 包括两个对象：

在 HTML5 之前，应用数据需要存放在 Cookie 中，每次请求时都需要携带它。相较而言，Web 存储 API 拥有以下优点：

除此之外，localStorage 还有以下特点：

为 localStorage 添加或修改数据有三种方式：

localStorage.age = 100
localStorage['age'] = 100
localStorage.setItem('age', 100)  // 推荐使用

在 localStorage 中查看数据也有三种方式：

localStorage.age
localStorage['age']
localStorage.getItem('age')  // 推荐使用

在 localStorage 中删除数据有三种方式：

delete localStorage.age
delete localStorage['age']
localStorage.removeItem('age')  // 推荐使用

清空整个 localStorage：

// 清空整个 localStorage
localStorage.clear()

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。