如何在JavaScript中使用localStorage详情


Posted in Javascript onFebruary 04, 2021

如果你是一名开发人员,想要进入到.NET的世界,你需要知道都有哪些可能。由于.NET Framework是.NET生态系统中最流行的技术,你可以用它来构建各种各样的应用程序,但是最近,出现了一些新的东西,比如 .NET Core 和.NET Standard library。我们可以在项目或构建中使用它吗?

localStorage对象是web编程中应用最广泛的对象之一。它提供了在用户计算机上本地存储键值对的简单解决方案。

大多数web开发人员都喜欢localStorage API,因为它具有简单的语法并且可以存储高达5MB的数据。

除此之外,所有主流浏览器的最新版本都支持Web Storage API,其中包括localStorage和sessionStorage。只有Opera Mini不支持webstorage API。

你可以通过打开Chrome DevTools快速验证你的浏览器是否支持webstorage API。导航到“控制台”,键入下面的代码片段,并按enter键。

typeof(Storage)

如果你收到一个undefined ,那么你的浏览器不支持webstorage API。如果你的浏览器支持它,那么你应该看到“function”。

本文探讨了以下问题:

  • localStorage是什么?
  • localStorage和sessionStorage之间有什么区别?
  • 如何使用localStorage API执行CRUD操作
  • 常见的本地存储有什么坑?
  • localStorage的有什么限制?

localStorage是什么?

正如之前提到的,localStorage对象是浏览器本地支持的webstorage API的一部分。这是一个简单而有效的键/值存储解决方案。

对于web开发人员来说,使用localStorage对象的最大好处是可以脱机存储。最重要的是,当用户关闭浏览器或重启电脑时,我们不会丢失数据。即使在计算机重新启动后,网站仍然可以使用localStorage API读取本地存储在用户计算机上的数据。

这个解决方案为web开发人员提供了几个有趣的用例。

  • 离线存储网站的用户设置
  • 保留用户搜索历史
  • 保留购物车里的物品

接下来,让我们比较localStorage和sessionStorage。

localStorage和sessionStorage之间有什么区别?

虽然这两个api看起来是相同的,但它们的执行方式有细微的差异。

localStorage API用于本地存储数据。因此,当用户刷新选项卡、关闭浏览器或重启计算机时,本地保存的数据不会丢失。它是长期存储基本数据的理想解决方案。

sessionStorage API在页面刷新后仍然有效,但只能在相同的选项卡中工作。

简而言之,在为应用程序选择存储解决方案时要注意。例如,最好的做法是将用户设置信息存储在localStorage中。相反,sessionStorage最适合为特定会话存储数据。

如何使用localStorage API执行CRUD操作

本节向你展示如何使用localStorage API进行添加、读取、更新或删除操作。在此基础上,我将向你展示一个清除特定页面localStorage的技巧。

首先,让我们在localStorage对象中创建一个新的键值对。setItem函数接受一个键及其值。为密钥选择一个合适的名称,你可能将使用该密钥名称再次进行检索。

localStorage.setItem(‘my-key', ‘some-value')

现在让我们再次检索新创建的对象。

let item = localStorage.getItem(‘my-key')

console.log(item) // Output: “some-value”

这很简单。让我们继续更新my-key的值。注意,我们使用相同的setItem函数来覆盖它的值。

localStorage.setItem(‘my-key', ‘new-value')

最后,让我们删除这个键。removeItem函数接受一个参数,它就是想要删除的键。

localStorage.removeItem(‘my-key')

为了确保我们已经删除了所有键,让我们使用clear函数来清除存储在localStorage中应用程序的所有内容。

localStorage.clear()

现在,我们已经为更高级的localStorage操作做好了准备。

高级localStorage操作:遍历

让我们看看用于遍历localStorage对象和查找键的方法。

第一种方法使用了最直接的for循环。注意,我们可以直接在localStorage对象上使用length属性。

for(let i=0; i<localStorage.length; i++) {
 let key = localStorage.key(i)
 console.log(`${key} with value ${localStorage.getItem(key)}`)
}

我们也可以直接使用key方法检索相应的键。

for (let i = 0; i < localStorage.length; i++){
 let key = localStorage.key(i)
 console.log(key)
}

接下来,让我们看看在使用localStorage API时要避免的坑。

localStorage常见的坑

让我们看一下与localStorage API交互时最常见的两个坑。

首先,尝试存储一个JSON对象。localStorage API被设计为键-值对存储。因此,该值只接受字符串,不接受对象。然而,这并不意味着我们不能存储对象。我们需要将它序列化为一个字符串。

const dinner = { apples: 5, oranges: 1 }
localStorage.setItem(‘my-dinner', JSON.stringify(dinner))

当读取序列化的对象时,我们需要再次将其解析为JSON。

let dinner = JSON.parse(localStorage.getItem(‘my-dinner'))

其次,尝试存储一个布尔值。同样,localStorage API只支持字符串。存储布尔值时要小心。

幸运的是,该解决方案类似于存储一个JSON对象。当存储一个布尔值时,setItem函数将把它转换为像这样的字符串- " true "。要读取带有字符串的布尔值,我们可以使用JSON.parse方法将其转换回布尔值。

let myBool = JSON.parse(localStorage.getItem(‘my-bool'))

localStorage的限制

这里是对localStorage限制的快速回顾。

  • 基于字符串的存储
  • 大多数浏览器的存储空间有限,最多可达5 MB
  • 尝试存储巨大字符串时会阻塞主线程。确保不要同时更新相同的键,因为这将导致问题。在这种情况下,最好寻找替代存储解决方案,因为localStorage API不是为这个目的而设计的。
  • Web worker或web service无法访问localStorage
  • 没有内置的安全机制。因此,我们不建议存储密码或与身份验证相关的数据。任何可以访问用户浏览器的人都可以打开一个页面并读取存储在localStorage中的信息,就像图书馆中公共可用的计算机一样。

到此这篇关于如何在JavaScript中使用localStorage的文章就介绍到这了,更多相关如何在JavaScript中使用localStorage内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
推荐:极酷右键菜单
Nov 29 Javascript
js获取元素在浏览器中的绝对位置
Jul 24 Javascript
javascript 隔行换色函数代码
Oct 24 Javascript
js点击更换背景颜色或图片的实例代码
Jun 25 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
javascript修改图片src的方法
Jan 27 Javascript
JavaScript实现定时隐藏与显示图片的方法
Aug 06 Javascript
JavaScript中Object.prototype.toString方法的原理
Feb 24 Javascript
bootstrap vue.js实现tab效果
Feb 07 Javascript
Vue组件系列开发之模态框
Apr 18 Javascript
JS获取动态添加元素的方法详解
Jul 31 Javascript
vue 全局环境切换问题
Oct 27 Javascript
vue浏览器返回监听的具体步骤
Feb 03 #Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 #Vue.js
详解React中共享组件逻辑的三种方式
Feb 02 #Javascript
详解微信小程序轨迹回放实现及遇到的坑
Feb 02 #Javascript
学习 Vue.js 遇到的那些坑
Feb 02 #Vue.js
Vue常用API、高级API的相关总结
Feb 02 #Vue.js
JavaScript实现点击自制菜单效果
Feb 02 #Javascript
You might like
PHP的分页功能
2007/03/21 PHP
PHP中几种常见的超时处理全面总结
2012/09/11 PHP
PHP 读取Postgresql中的数组
2013/04/14 PHP
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
学习jquery必备 api中英文对照的chm手册 下载
2007/05/03 Javascript
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
jquery easyui 结合jsp简单展现table数据示例
2014/04/18 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
浅谈类似于(function(){}).call()的js语句
2015/03/30 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
jQuery弹出层插件popShow(改进版)用法示例
2017/01/23 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
JS简单添加元素新节点的方法示例
2018/02/10 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
2018/08/25 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
2020/05/09 Javascript
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
python 比较2张图片的相似度的方法示例
2019/12/18 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
python爬取youtube视频的示例代码
2021/03/03 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
CHRONEXT英国:您的首选奢华腕表目的地
2020/03/30 全球购物
汽车工程专业应届生求职信
2013/10/19 职场文书
中职应届生会计求职信
2013/10/23 职场文书
党员违纪检讨书
2014/02/18 职场文书
高中教师评语大全
2014/04/25 职场文书
纪检干部学习心得体会
2016/01/23 职场文书
2019个人半年工作总结
2019/06/21 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server