了解Java script中的localStorage

举报
搞前端的半夏 发表于 2022/05/31 23:17:59 2022/05/31
【摘要】 什么是kie 有何不同??localStorage是一种在客户端,在浏览器中存储数据的方法。此数据存储在键/值对中,可供在该页面上运行的 JavaScript 代码使用。localStorage是持久的,这意味着即使关闭并重新打开浏览器,数据也会保留。这使其成为存储需要稍后访问的数据(例如用户首选项或设置)的不错选择。重要的是要知道存储在其中的数据localStorage是特定于域的,因此...

什么是kie 有何不同??

localStorage是一种在客户端,在浏览器中存储数据的方法。此数据存储在键/值对中,可供在该页面上运行的 JavaScript 代码使用。

localStorage是持久的,这意味着即使关闭并重新打开浏览器,数据也会保留。这使其成为存储需要稍后访问的数据(例如用户首选项或设置)的不错选择。

重要的是要知道存储在其中的数据localStorage是特定于域的,因此存储在一个站点上的数据将无法用于另一个站点。

localStorage 与 cookie 有何不同?

localStorage和 cookie之间有一些关键的区别。首先,本地存储不会像 cookie 那样随每个 HTTP 请求一起发送,因此效率更高。其次,本地存储数据是持久的,这意味着它不会像 cookie 那样过期。最后,本地存储数据也更安全,因为它不像 cookie 那样通过网络传输。

如何使用本地存储

现代浏览器提供了一个清晰的 API 来使用localStorage,在本节中,我们将仔细研究允许我们使用这个工具的方法。

存储数据

localStorage用于将数据存储在键/值对中。该setItem()方法用于存储数据:

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

是要存储的项目的'key'名称, 是要存储'value'的数据。

检索数据

getItem()方法用于检索数据:

localStorage.getItem('key');

这将返回与指定键关联的值,或者null如果该键不存在。

从本地存储中删除数据

removeItem()方法用于删除数据:

localStorage.removeItem('key');

这将删除与指定键关联的数据。

清除本地存储

clear()方法用于清除所有数据localStorage

localStorage.clear();

此方法从 中删除所有数据localStorage,包括与任何键无关的数据。

本地存储示例

这是一个将用户名存储在的简单示例localStorage

localStorage.setItem('name', 'John Smith'); 

let name = localStorage.getItem('name'); 

console.log(name); 
localStorage.removeItem('name');

此示例首先在localStorage使用该setItem()方法时存储一个名称。localStorage然后它使用该getItem()方法检索名称。localStorage最后,它从使用removeItem()方法中删除名称。

localStorage 的限制

localStorage是一个强大的工具,但它有一些限制。

首先,正如我们在文章开头已经提到的,存储在 localStorage 中的数据是特定于域的。这意味着存储在一个域上的数据不能被另一个域访问。

其次,localStorage只支持字符串。这意味着非字符串的数据(例如对象)必须先转换为字符串,然后才能存储在 localStorage 中。

localStorage是不安全。存储在localStorage其中的数据未加密,可以通过页面上的任何代码访问。

localStorage是不靠谱。localStorage如果用户清除浏览器缓存或 cookie,存储在其中的数据可能会丢失。

结论

localStorage是一种在浏览器本地存储数据的简单方便的方法。它可以成为您工具箱的强大补充。

请记住 的限制localStorage,并确保在存储复杂数据结构之前对其进行序列化。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。