如何在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 相关文章推荐
原型方法的不同写法居然会影响调试的解决方法
Mar 08 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
Sep 05 Javascript
Js base64 加密解密介绍
Oct 11 Javascript
js图片处理示例代码
May 12 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
Dec 15 Javascript
Treegrid的动态加载实例代码
Apr 29 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
Jul 01 Javascript
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
基于Vue的移动端图片裁剪组件功能
Nov 28 Javascript
微信小程序switch开关选择器使用详解
Jan 31 Javascript
webstorm中vue语法的支持详解
May 09 Javascript
对layui中的onevent 和event的使用详解
Sep 06 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连接SQLServer2005的方法
2015/01/27 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
PHP数据库操作三:redis用法分析
2017/08/16 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
关于JS管理作用域的问题
2013/04/10 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
js 动态修改css文件的方法
2014/08/05 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
实现音乐播放器的代码(html5+css3+jquery)
2015/08/04 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
JavaScript中的高级函数
2018/01/04 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
Python之PyUnit单元测试实例
2014/10/11 Python
windows 下python+numpy安装实用教程
2017/12/23 Python
django的csrf实现过程详解
2019/07/26 Python
Python 元组操作总结
2019/09/18 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
淘宝客服专员岗位职责
2014/04/11 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
工程竣工验收申请报告
2015/05/15 职场文书
行政撤诉申请书
2015/05/18 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
浅谈Python数学建模之整数规划
2021/06/23 Python