localStorage.getItem / .setItem是异步的吗？

localStorage.getItem和localStorage.setItem都是同步的操作，而不是异步的。

localStorage是HTML5提供的一种在客户端存储数据的机制，它可以在浏览器中存储键值对，并且数据在页面刷新或关闭后仍然保留。localStorage提供了getItem和setItem两个方法来读取和设置存储的数据。

localStorage.getItem方法用于获取指定键的值，它接受一个参数作为键名，并返回对应的值。如果指定的键不存在，则返回null。

localStorage.setItem方法用于设置指定键的值，它接受两个参数，第一个参数是键名，第二个参数是要存储的值。如果指定的键已经存在，则会更新对应的值；如果键不存在，则会创建一个新的键值对。

由于localStorage是在客户端进行操作的，而不涉及网络通信，所以getItem和setItem方法都是同步的。它们会立即执行并返回结果，不会阻塞其他代码的执行。

在使用localStorage时，需要注意存储的数据大小限制和浏览器的隐私模式限制。此外，localStorage只能存储字符串类型的数据，如果需要存储其他类型的数据，需要进行相应的转换。

腾讯云提供了云存储服务COS（对象存储），可以用于存储和管理大规模的非结构化数据，包括图片、音视频、文档等。COS提供了简单易用的API接口，可以方便地进行数据的上传、下载和管理。您可以通过腾讯云COS官网了解更多信息：https://cloud.tencent.com/product/cos

相关·内容

React中的setState是异步的吗？

render(){ console.log("render: " + this.state.count); } 打印结果为 console:0 render:1 所以，从表现上看，setState是异步的...其实，这只是React的障眼法。 setState是同步执行的！但是state并不一定会同步更新（异步更新和同步更新都存在） 1....React.setState()中的异步更新 setState()中有个特别重要的布尔属性isBatchingUpdates（默认为false,），它决定了state是同步更新还是异步更新。...setState调用.png setState 只在合成事件和钩子函数中是“异步更新”的。异步更新的背后，是同步代码处理（"合成事件和钩子函数"的调用在"更新"之前）。...异步是为了实现批量更新的手段，也是React性能优化的一种方式。 2.

2.1K1 0

iocp详解_iocp是异步io吗

大家好，又见面了，我是你们的朋友全栈君。...LPVOID pvParam); #define PORT 8080 #define LISTEN_QUEUE 200 // AcceptEx 和 GetAcceptExSockaddrs 的函数指针...CreateIoCompletionPort((HANDLE)listenHandle.socket, IOCPhandle, (unsigned long)&listenHandle, 0); // 使用AcceptEx函数，因为这个是属于...WinSock2规范之外的微软另外提供的扩展函数 // 所以需要额外获取一下函数的指针， // 获取AcceptEx函数指针 GUID GuidAcceptEx = WSAID_ACCEPTEX...如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

3331 0

你知道 @Async 是怎么让方法异步执行的吗？

前言@Async 是通过注解标记来开启方法的异步执行的；对于注解的底层实现，除了 java 原生提供那种依赖编译期植入的之外，其他的基本都差不多，即运行时通过反射等方式拦截到打了注解的类或者方法，然后执行时进行横切拦截...；另外这里还有一个点就是方法异步执行，所以对于 @Async 的剖析，就一定绕不开两个基本的知识点，就是代理和线程池。...interceptor.configure(executor, exceptionHandler); return interceptor; } 复制代码到这里，关于 @EnableAsync 是如何开启创建异步方法的逻辑基本就介绍完了...这里是个延迟载入的操作，即只有当异步方法被调用时，才会触发 SingletonSupplier get 操作，从而触发 getBean 的逻辑，如果你在 debug 时出现没有正常走到断点的情况，可以关注下这个场景...，即每个方法都有一个自己的 executor；异步方法在第一次执行的时候创建自己的 executor，然后缓存到内存中。

8412 0

webapi（六）- BOM

BOM：浏览器对象模型 Window是浏览器内置的全局对象（也叫顶级对象），我们学习的所有Webapi知识都是基于Window对象实现的。...(2) }, 0) // 异步任务 console.log(3) // 同步任务同步任务只有前一个任务执行完毕，才能执行后一个任务程序的执行顺序与任务的书写顺序是一致的...同步任务会有阻塞异步任务异步任务由 JavaScript 委托给宿主环境(浏览器)进行执行当异步任务执行完成后，会通知 JavaScript 主线程执行异步任务的回调函数异步任务不会有阻塞比如常见的异步任务...// 语法： localStorage.setItem('键', '值') localStorage.setItem('ha' , '哈哈哈') 获取数据 localStorage.getItem...在将JSON字符串解析成JS的复杂数据 // 存的是JSON字符串，取出来的也是字符串 console.log(localStorage.getItem('data')) // 所以需要JSON解析为复杂数据类型

9042 0

HTML5简明教程（四）Web存储

HTML5的Web存储涉及两部分内容，一是数据存储，支持更多本地存储方案；二是文件读取，支持了File API。 1....本地存储 Web应用中数据存储有两种方式：一是Web服务器，二是客户端存储，也就是本地存储。 HTML5出现之前，本地存储只有一种方式：cookie。...，和存储相关的方法有setItem()，getItem()，removeItem()，clear()。...)，最常用的是第一种。...，FileReader实例 var reader = new FileReader(); //异步取得文件内容 reader.onload = function (e) {

7963 0

玩转console

为蓝色的。...padding左右两边的值是图片宽度的一半。 padding上下的值，需要自己慢慢去尝试直到满足为止。...("access") || localStorage.setItem("access", (new Date).getTime()); let e = new Date(parseInt(localStorage.getItem...t = parseInt(localStorage.getItem("hit")) : localStorage.setItem("hit", 0); localStorage.setItem("hit...", ++t); console.log(`%c这是你自 %c${o} %c以来第 %c${t} %c次在本站打开控制台，你想知道什么秘密吗～`, "", "color:chocolate;font-weight

1731 0

HTML5规范的本地存储

是基于域的，在该域的任何网页都可以访问，在不同设备上存储的是不同的。　　...在本地存储一个字符串类型的数据 key/value setItem 　　　　localStorage.setItem("name","非一般的黑客") 　　通过getItem 方法读取key...localStorage.getItem("name") 　　也可以通过索引去读取，localStorage.key(1) 　　删除指定key为“name”的item 　　　　...var newUserDta = JSON.parse(localStorage.getItem("userData")) 　　//删除本地存储的item 　　　　localStorage.removeItem...6.url 主要是一种输入URL 地址的文本框类型，提供的输入法是网址输入法键盘。

2.2K5 0

LocalStorage存储JSON对象的问题

localStorage - 没有时间限制的数据存储 1 var arr=[1,2,3]; 2 localStorage.setItem("temp",arr); //会返回1,2,3 3 console.log...(typeof localStorage.getItem("temp"));//string 4 console.log(localStorage.getItem("temp"));//1,2,3 localStorage.setItem...3 localStorage.setItem("temp2", obj);//但是返回[object Object] 用localStorage.setItem()正确存储JSON对象方法是：存储前先用...:1,"b":2} 后续要操作该JSON对象，要将之前存储的JSON字符串先转成JSON对象再进行操作 1 obj=JSON.parse(localStorage.getItem("temp2"));...假设他是一个数组 25 /* if ( storage ) { 26 // 有数据, 数据是字符串 27 // 应该将其转换成

1.5K1 0

前端请求token过期时,刷新token的处理

一般的后端接口设置的token是有时效的，超时后就会失效，失效之后的处理策略一般会做两种处理，一种是直接跳转到登录页面，重新登录。流程图如下： ?...但是此时我们要考虑一个问题，通常一个页面中不只是发送一个异步请求，可能会同时发送多个异步请求，下面我们用流程图来描述一下一个页面同时发送多个请求的情况，并且者多个请求都需要验证token，图示如下: ?...首先咱们根据现实中的场景来模拟一下上面的获取token与刷新token的动作：比如有5个人同时去买票，这里为了与是刷新token的场景类似，五个人从5个通道来买票，彼此并不知道还有其他四个人也来买票，...这五个人都发现买票窗口没人，此时按照刚才的场景，可能会出现如下情况，五个人，每个人都会去呼叫叫售票员，然后完成买票，还有一种情况是，其中某一个人去叫售票员，并且会在售票窗后贴一个纸条，告诉其他几个人，售票员马上来...('refreshToken',response.data.refreshToken); localStorage.setItem('token',response.data.token

21.8K10 5

保存用户信息到本地存储

简介：在页面加载时从本地存储中恢复数据，并将已保存的数据显示在对应的输入框中。...定义保存数据函数：saveData函数会从输入框中获取值，并使用localStorage.setItem方法将值保存到本地存储中。...("name", name); localStorage.setItem("mail", mail); localStorage.setItem("weburl", weburl);...("name")) { nameInput.value = localStorage.getItem("name"); } if (localStorage.getItem(..."mail")) { mailInput.value = localStorage.getItem("mail"); } if (localStorage.getItem("

2214 0

保存用户信息到本地存储

811 0

webApis06-navigator、history、本地存储、线程、数组方法、正则表达式

/) const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/) // 如果是Android.../) const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/) // 如果是Android或iPhone...('height')) console.log(localStorage.getItem('age'))//取不存在的数据---null }) /...// 2.取数据 console.log(localStorage.getItem('age')); console.log(typeof localStorage.getItem...result);//object console.log(result); }) 线程-同步异步

3013 0

本地存储

本地存储随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。...var val = inp.value; sessionStorage.setItem("uname", val); sessionStorage.setItem("pwd...存储数据： localStorage.setItem(key, value) 获取数据： localStorage.getItem(key) 删除数据： localStorage.removeItem...var val = inp.value; localStorage.setItem("uname", val); localStorage.setItem...// localStorage.getItem("uname"); console.log(localStorage.getItem("uname"));

1.3K2 0

Js一些常用demo

("access") || localStorage.setItem("access", (new Date).getTime()); let e = new Date(parseInt(localStorage.getItem...t = parseInt(localStorage.getItem("hit")) : localStorage.setItem("hit", 0); localStorage.setItem(..."hit", ++t); console.log(`%c这是你自 %c${o} %c以来第 %c${t} %c次在本站打开控制台，你想知道什么秘密吗～`, "", "color:chocolate...;font-weight:bolder;", "", "color:chocolate;font-weight:bolder;", ""); } } 禁止使用快捷键打开控制台这个是闹着玩的，只需把右键点击事件取消...，在把Ctrl+U和F12这两个快捷键原本的事件取消，或者重新设置一个监听方法就可以了。

1901 0

【Vuejs】总结- Vue 存储插件的底层原理，你不知道的 localStorage API

存储数据 localStorage.setItem('username', 'john_doe') // 使用 getItem 检索数据 const storedUsername = localStorage.getItem...(cat)) // 检索并解析 cat 对象 const storedCat = JSON.parse(localStorage.getItem('cat')) localStorage 的缺陷尽管...localStorage 十分便捷，但它存在某些限制：非异步阻塞 API：一个显著的缺点在于，localStorage 作为非异步阻塞 API 运行。...React Native 的异步存储对于 React Native 开发者而言，AsyncStorage API 是首选解决方案，它类似 localStorage 的镜像行为，但具有异步支持。...与 localStorage 相比，这个 API 的异步执行，且所有操作都会返回 Promise。

991 0

【JS】1693- 重学 JavaScript API - Web Storage API

以下是一个简单的示例代码，演示如何使用 Web Storage API 存储和检索数据： // 存储数据 localStorage.setItem("username", "Chirs1993"); localStorage.setItem...实际应用以下介绍 5 个实际应用场景： 3.1 保存用户首选项和设置 Web Storage API 是保存用户首选项和设置的理想选择。...兼容性和优缺点 4.1 兼容性以下是 Web Storage API 在不同浏览器中的兼容性信息： Chrome：4+ ✅ Firefox：3.5+ ✅ Safari：4+ ✅ Internet Explorer...「域名限制」：Web Storage API 的数据是与特定的域名关联的，无法在不同域名之间共享数据。 5....使用建议和注意事项在使用 Web Storage API 时，以下是一些建议和注意事项：「适当使用 localStorage 和 sessionStorage」根据需求选择合适的存储机制，如果需要持久性存储数据

2444 0

探索 | 我只是想保存一个 Key！

当我们在写普通的 JavaScript 时，我们肯定会这样储存和读取数据： localStorage.setItem("Information", "Token BBB-BBB-BBB"); localStorage.getItem...("Information"); 这种方法是使用 localStorage 进行的数据储存和读取，这里是 MDN 对于 localStorage 的文档： Window.localStorage -...Promise（因为 Cache API 和 IndexedDB 也是异步执行）使用 Cache 储存数据 # Service Worker 中的 Cache API 也可以用来储存数据，常规的...，这里我们使用 ChenYFan 大佬的 Cache-DB 库来实现这个库返回的仍然是 Promise，因此用法和 localForage 类似这里是一段演示代码： // sw.js self.importScripts...BlogOnNpm 采用的是 Cache-DB 进行数据储存这些是 Service Worker 进行数据储存的可行方法，可能还有更多

841 0

那些出乎意料的类型转换

本文作者：IMWeb helinjiang 原文出处：IMWeb社区未经同意，禁止转载 JavaScript是一门弱类型的语言，因此类型之间的转换会更频繁也更灵活。...a) { console.log("1"); } else { console.log("2"); } 上述结果是打印 1 还是 2 呢？答案是 2。...比如下面的例子： localStorage.setItem('testNum', 0); var testNum = localStorage.getItem('testNum'); console.log...数组转换为字符串和数字一般我们将数组转换成字符串的方式是使用 Array.prototype.join() 方法。...我们这里不讨论详细的转换规则，仅来看一个有趣的事：已知"1" == 1，且" 1 " == 1，那么能够得出 "1" == " 1 "的结论吗？很遗憾，不能！

3323 0

HTML5本地存储：从入门到精通

HTML5本地存储：从入门到精通基础知识 1️⃣ 什么是HTML5本地存储？概念： HTML5本地存储是一种允许Web应用程序在用户浏览器端本地保存数据的技术，无需依赖服务器。...示例代码： // 设置数据 localStorage.setItem('userPreferences', JSON.stringify({ theme: 'dark' })); sessionStorage.setItem...大容量存储：提供远超Web Storage的存储空间，理论上无硬性限制，实际取决于用户设备。异步操作：所有数据库操作（如打开、读写、查询）均采用异步模式，保证UI流畅性。...); sessionStorage.setItem(key, value); 获取数据 const data = localStorage.getItem(key); const data = sessionStorage.getItem...五、注意事项数据清理应遵循最小权限原则，只删除确实不再需要或已过期的数据，避免误删重要信息。清理操作应在事务中进行，尤其是对于IndexedDB，确保数据一致性。

761 0

localstorage跟sessionstorage

javascript"> function cunchu1(){ var arr = [ 1, 2, 3 ]; localStorage.setItem...("temp", arr); //存入参数： 1.调用的值 2.所要存入的数据 console.log(localStorage.getItem("temp"));//输出...obj = {"a": 1,"b": 2}; obj = JSON.stringify(obj); //转化为JSON字符串 localStorage.setItem...("temp")); } function huoqu2(){ var oo = JSON.parse(localStorage.getItem(...这两个的区别就是一个生命周期是随浏览器的，一个是保存到本地的。OK

9052 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

localStorage.getItem / .setItem是异步的吗？

相关·内容

React中的setState是异步的吗？

iocp详解_iocp是异步io吗

你知道 @Async 是怎么让方法异步执行的吗？

webapi（六）- BOM

HTML5简明教程（四）Web存储

玩转console

HTML5规范的本地存储

LocalStorage存储JSON对象的问题

前端请求token过期时,刷新token的处理

保存用户信息到本地存储

保存用户信息到本地存储

webApis06-navigator、history、本地存储、线程、数组方法、正则表达式

本地存储

Js一些常用demo

【Vuejs】总结- Vue 存储插件的底层原理，你不知道的 localStorage API

【JS】1693- 重学 JavaScript API - Web Storage API

探索 | 我只是想保存一个 Key！

那些出乎意料的类型转换

HTML5本地存储：从入门到精通

localstorage跟sessionstorage

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐