首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用localStorage.getItem访问值将返回旧值,即使在清除后也是如此

localStorage.getItem是Web浏览器提供的API之一,用于从本地存储中获取存储的值。它接受一个参数,即存储的键名,返回与该键名相关联的值。在使用localStorage.getItem访问值时,即使在清除浏览器缓存或重启浏览器后,仍然会返回旧值。

localStorage是一种在浏览器中存储数据的机制,它可以将数据以键值对的形式存储在用户的本地浏览器中。与会话存储(sessionStorage)相比,localStorage存储的数据没有过期时间限制,即使关闭浏览器窗口或重启电脑后,数据仍然保留。

localStorage的优势在于:

  1. 持久性存储:localStorage中存储的数据不会因为浏览器关闭而丢失,数据可以持久保存。
  2. 容量较大:localStorage的存储容量一般为5MB,相对而言比cookie的4KB容量要大得多。
  3. 客户端存储:数据存储在客户端,减轻了服务器的负担,提高了网站的性能。

localStorage适用于以下场景:

  1. 本地缓存:可以将一些常用的数据存储在localStorage中,避免每次都从服务器请求数据,提高应用的响应速度。
  2. 离线应用:将应用的资源文件存储在localStorage中,使得用户在离线状态下仍然可以访问应用。
  3. 用户个性化设置:可以将用户的个性化设置存储在localStorage中,下次访问时直接读取,提供更好的用户体验。

对于腾讯云相关产品的介绍和推荐链接地址,可以参考腾讯云官方文档或者腾讯云产品官网。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

PWA - 令人惊奇的web用户体验新方法

安全:PWA使用https进行通信加密,防止了被第三方获取数据以及数据被篡改 推送:做到不打开网页的前提下,推送新的消息 可安装:能够 Web像 APP 一样添加到桌面,可以主屏幕上创建图标 为什么是渐进式...通过 PUSH API,当订阅了推送服务,可以使用推送方式唤醒 Service Worker 以响应来自系统消息传递服务的消息,即使用户已经关闭了页面。...Cache.add(request) 抓取这个URL, 检索并把返回的response对象添加到给定的Cache对象.这在功能上等同于调用 fetch(), 然后使用 Cache.put() response...示例中是缓存用于离线时使用的静态资源,这也是最常见的行为....版本更新 更新静态资源:缓存的资源随着版本的更新会过期, 所以会根据缓存的字符串名称(这里变量为 cacheStorageKey, 用了 "minimal-pwa-1")清除缓存, 可以遍历所有的缓存名称逐一判断决决定是否清除

2.6K10
  • HTML5本地存储:从入门到精通

    ,否则会一直保存在用户的浏览器中,即使关闭浏览器或重启电脑也不受影响。...事务处理: 内置事务机制,确保数据一致性,即使复杂的多步骤操作中也能保证数据完整性。...4️⃣ 最佳实践 数据序列化: 复杂数据结构(如对象、数组)转化为字符串(如JSON)再存入Web Storage。 兼容性检查: 使用typeof localStorage !...== 'undefined'等条件判断,确保不支持本地存储的环境中优雅降级。 容量监控: 实时跟踪存储使用情况,避免超过浏览器限制。 数据清理: 定期清理不再需要的数据,保持存储空间整洁。...5️⃣ 安全性与隐私 同源策略: 保障了不同源之间的数据隔离,防止恶意站点访问其他网站的本地存储数据。 HTTPS: 使用HTTPS加密通信,保护本地存储数据传输过程中的安全。

    10010

    运用惰性删除和定时删除实现可过期的localStorage缓存

    localStorage简介 使用localStorage可以浏览器中存储键值对的数据。...但是它们之间的区别是:存储localStorage的数据可以长期保留;而当页面会话结束(也就是当页面被关闭)时,存储sessionStorage的数据会被清除。...另外需要注意的是,localStorage中的键值对总是以字符串的形式存储,并且只能访问当前域名下的数据,不能跨域名访问。...还可以使用getItem方法读取对应键的数据,比如: var name = localStorage.getItem('name'); 可以使用removeItem方法移除对应的键,比如: localStorage.removeItem...惰性删除 惰性删除是指,某个键值过期,该键值不会被马上删除,而是等到下次被使用的时候,才会被检查到过期,此时才能得到删除。

    1.3K40

    客户端存储技术

    例如,https请求就能发送ccokie,而http请求则不会,添加secure字样即可开启 这些参数使用使用分号隔开 1.3 JavaScript中cookie的使用 这里结合自动登录功能来谈论...当作为被调用时,可以返回当前地址下的所有cookie,为字符串类型 注意:存在多个cookie一起返回时,用; 隔开。...name1=value1;name2=value2,因此获取cookie要经历以下几步 利用字符串中split方法,返回的字符串通过;标识符进行分割返回数组 再通过遍历分割好的cookie数组,逐一判断需要获取的...,避免空格对后面处理造成影响 第6行中使用到了字符串方法indexOf,用于查找字符串中是否存在我们需要的获取的cookie名,找得到返回就为首次出现的索引,否则为-1 inedxOf方法可返回某个指定的字符串字符串中首次出现的位置...,需要将获取数据经过JSON.parse转化为对象再使用 2.2 sessionStorage对象 又叫临时存储,顾名思义只是暂时存储,浏览器会话窗口关闭,会全部清除 操作方法和localStorage

    1.5K20

    测试开发必备!webStorage 浏览器本地存储数据(附项目实战案例!)

    但也存在一定的缺陷,例如: 清除浏览器缓存 手动删除本地存储空间 这两种清除浏览器数据的行为,都会导致使用 webStorage 核心 API 写入的数据被清除掉,再次刷新浏览器时,数据为空。...使用时可依据存储数量的大小酌情考虑是否使用浏览器本地存储。 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。...XXXStorage.getItem('todo'); 该方法接受一个键名作为参数,返回键名对应的。...LocalStorage 存储的内容,需要手动清除才会消失。 XXXStorage.getItem(key) 如果 key 对应的 value 获取不到,那么 getItem 的返回是 null。...建议大家本次分享中优化的代码片段替换原代码文件片段,再使用npm run serve重启服务,亲自实践感受下浏览器刷新是否还会丢失新增的 todo 数据。

    53710

    Google Guava Cache 使用

    缓存尝试回收最近没有使用或总体上很少使用的缓存项。——警告:缓存项的数目达到限定之前,缓存就可能进行回收操作——通常来说,这种情况发生在缓存项的数目逼近限定时。...权重限定场景中,除了要注意回收也是重量逼近限定时就进行了,还要知道重量是缓存创建时计算的,因此要考虑重量计算的复杂度。...使用CacheBuilder构建的缓存不会"自动"执行清理和回收工作,也不会在某个缓存项过期马上清理,也没有诸如此类的清理机制。...刷新操作进行时,缓存仍然可以向其他线程返回,而不像回收操作,读缓存的线程必须等待新加载完成。 如果刷新过程抛出异常,缓存保留,而异常会在记录到日志被丢弃[swallowed]。...从某种意义上说,其实是支持的:如果CacheLoader抛出InterruptedException,Cache.get立刻返回(就和其他异常情况一样);此外,加载缓存的线程中,Cache.get

    1.2K30

    【技术博客】Cache应用中的服务过载案例研究

    基于超时的简单(stupid)模式 T到达,任何线程get操作发现Cache中的Key和对应Value将被清除或标记为不可用,get操作发起调用远程服务获取Key对应的Value,并更新写回Cache...基于刷新的常规模式 T到达,Cache中的Key和相应Value都不会被清除,而是被标记为数据,如果有线程调用get操作,触发refresh更新操作,根据get和refresh的同步关系,又分为两种模式...基于刷新的续费模式中,如果refresh操作失败,那么refresh将把值当成新返回,这样就相当于又被续费了T时间,后续T时间内get操作取到这个续费的而不会触发refresh操作。...第3点,B系统不会发生服务过载的主要原因是基于刷新的续费模式下不会出现chache中的Key全部长时间过期的情况,即使B系统长时间不可用,基于刷新的续费模式也会在一个过期周期内把值当成新继续使用。...然而凡事有利就有弊,有两点需要注意的地方: 基于刷新模式最大的缺点是Key-Value一旦放入Cache就不会被清除,每次更新也是覆盖,JVM GC永远无法对其进行垃圾收集,而基于超时的模式中,

    1.1K50

    localStorage 的相关运用

    localStorage 是浏览器自带的一个属性,只读的localStorage 属性允许你访问一个Document 源(origin)的对象 Storage;存储的数据保存在浏览器会话中。...(需要注意,和 js 对象相比,键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型). localStorage 的使用也非常简单,分为存入和读取,可以将其绑定在事件方法中。...arr = JSON.parse(localStorage.getItem("key")); 就是读取浏览器中参数名为 key 的参数值。...一些场景下非常好用,比如开发一个油猴脚本等等。 清除 localStorage,分为清除所以的存储清除某个特定的 key。...// 清除本地存储中的所有 localStorage.clear(); // 本地存储中删除特定项 localStorage.removeItem(key);

    25910

    Django如何使用jwt获取用户信息

    HTTP请求是无状态的,我们通常会使用cookie或session对其进行状态保持,cookie存储客户端,容易被用户误删,安全性不高,session存储服务端,服务器集群情况下需要解决session...token判断用户信息、过期时间等信息,使用期间内不可能取消令牌或更改令牌权限。...# 验证密码返回token urlpatterns = [ re_path(r'v1/login/$', obtain_jwt_token,name='login'), # 用户登录返回token...switch (error.response.status) { // 401: 未登录 // 未登录则跳转登录页面,并携带当前页面的路径 // 登录成功返回当前页面...'token'); store.commit('loginSuccess', null); // 跳转登录页面,并将要浏览的页面fullPath传过去,登录成功跳转需要访问的页面

    3.3K10

    HTTP缓存和浏览器的本地存储

    3.强缓存 浏览器第一次访问接口的response headers里会携带一些字段,这些字段决定关于这个请求的缓存情况, 与强缓存相关的header字段有两个: 1、expires:过气网红,这是http1.0...类似,与Last-Modified不一样的是,当服务器返回304 Not Modified的响应时,由于ETag重新生成过,response header中还会把这个ETag返回即使这个ETag跟之前的没有变化...html5新增本地存储,localStorage生命周期是永久,除非主动清除localStorage信息,否则这些信息永远存在。...存放数据大小为一般为5MB,sessionStorage仅在当前会话下有效,关闭页面或浏览器清除。而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。...*利用JSON.stringify**将对象转换成字符串; //利用**JSON.parse**字符串转换成对象 // 2、从本地存储获取数据 localStorage.getItem('key');

    1.7K20

    本地存储

    本地存储 随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性本地存储大量的数据,HTML5规范提出了相关解决方案。...数据存储在用户浏览器中 2、设置、读取方便、甚至页面刷新不丢失数据 3、容量较大,sessionStorage约5M、localStorage约20M 4、只能存储字符串,可以将对象JSON.stringify() 编码存储...1.2.window.sessionStorage 1、生命周期为关闭浏览器窗口 2、同一个窗口(页面)下数据可以共享 3、以键值对的形式存储使用 存储数据: sessionStorage.setItem... 1.3.window.localStorage 1、声明周期永久生效,除非手动删除 否则关闭页面也会存在 2、可以多窗口(页面)共享(同一浏览器可以共享) 3、以键值对的形式存储使用...// localStorage.getItem("uname"); console.log(localStorage.getItem("uname"));

    1.3K20

    HTML5简明教程(四)Web存储

    也就是说,一旦用户关闭窗口,或者打开一个新标签访问同一个网页,无法取得原来的数据。 下面再进一步讲解着两种storage知识。...(1) cookie,localStorage和sessionStorage cookie localStorage sessionStorage 生命周期 默认保存在浏览器内存中,浏览器关闭时清除cookies...;如果设置expires属性,将把cookies保存在硬盘中,有效期为expires的 没有时间限制,一直保存在本地计算机上 关闭浏览器窗口或关闭浏览器时就会清空 作用域 同源 同源 只能在当前窗口共享...+ localStorage.getItem("user_obj")); //存储的对象数据转为对象使用 var read_obj = JSON.parse(localStorage.getItem(...参考下面例子(选择的文件内容以字符串方式显示页面上): <!

    81730

    H5本地存储详细使用教程--上

    6、兼容问题: 有人会说本地存储是H5的新贵,但是对于老、的浏览器来说怎么办?那就不用老古董浏览器呗,或者使用cookie作为替代。...因为大多使用localStorage是用来存储字符串的,在其他编译型的语言看来,存储字符串能做些什么,但在javascript身上,大放光彩,可以存储JSON格式的字符串来扩展应用,可以存储类名变量值等等信息再通过...但是localStorage类不支持H5的时候使用不了,所以我们localStorage的四个函数封装一下,使得当浏览器或客户端不兼容localStorage时自动切换到Cookies存储。...把做好的myStorage.js文件引入到HTML文档,用法就是跟localStorage的函数一样,不信你试试: (1)myStorage.setItem(键名,键值) 本地客户端存储一个字符串类型的数据...对应的(很像PDO的预处理)。注意,executeSql不能单独使用,需要在事务transaction函数下使用

    2.6K70

    H5学习之路之Web存储解决方案

    ok,到这里基本上正常使用这个是没有问题了,那么有的人说了,这个做登录是没有问题,用户刷新页面也是对的,但是按照这个说法,用户就是注销了,退出了,是不是重新进入还是会有自己的信息,那岂不是很不安全,也不是常规的做法啊...有以下的几种方法: ①clear():删除所有。 ②getItem(name):根据指定的名字name获取对应的 ③key(index):指定的数字位置获取该位置的名字。...④removeItem(name):删除由name指定的名对 ⑤setItem(name,value):为指定名字设置一个对应的 下面我们介绍sessionstorage 用法是一样,区别在于他是只要关闭浏览器就是清除数据...sessionStorage操作限制单个标签页中,在此标签页进行同源页面访问都可以共享sessionStorage数据。 3) 只本地存储。...seesionStorage的数据不会跟随HTTP请求一起发送到服务器,只会在本地生效,并在关闭标签页清除数据。

    70210

    医美小程序实战教程(三)

    storage方法解析 ```bash /* 函数里面访问:通过 app.common.name.xxx 访问这里定义的方法或 函数外面访问:通过 import(如在页面的 handler 引用的例子...# web页面的缓存 我们还是看一下MDN的解释 > 只读的localStorage 属性允许你访问一个Document 源(origin)的对象 Storage;存储的数据保存在浏览器会话中。...看这个意思就是浏览器有个长期的存储区域可以使用,具体有四个方法可以调用 ```bash localStorage.setItem('myCat', 'Tom');//设置 let cat = localStorage.getItem...('myCat');//读取值 localStorage.removeItem('myCat');//清除 localStorage.clear();//清除全部 小程序的缓存 小程序的缓存在官方文档里有详细的介绍...JSON.stringify MDN的解释是 JSON.stringify() 方法一个 JavaScript 对象或转换为 JSON 字符串,如果指定了一个 replacer 函数,则可以选择性地替换

    70300

    webapi(六)- BOM

    语法: setTimeout(函数, 延时时间) 注意: setTimeout 仅仅只执行一次,平时省略window 清除延时函数 let timerId = setTimeout(fn , 1000)...JSON字符串解析成JS的复杂数据 // 存的是JSON字符串,取出来的也是字符串 console.log(localStorage.getItem('data')) // 所以需要JSON解析为复杂数据类型...console.log(JSON.parse(localStorage.getItem('data'))) sessionStorage 生命周期为关闭浏览器窗口 注意刷新不丢失 以键值对的形式存储使用...用法跟localStorage 基本相同 自定义属性 固有属性 标签自带的属性 自定义属性 程序员自定义的属性 便于标签上存储数据 规范做法:建议使用data-* 来表示自定义属性 通过dataset...来操作 // 自定义属性规范推荐的做法 // 说明:建议使用data-* 来表示自定义属性 // JS操作的时候,通过 dataset来进行操作

    92920

    本地缓存组件 Guava cache 详解

    expireAfterWrite //.expireAfterAccess(17, TimeUnit.SECONDS) //只阻塞当前数据加载线程,其他线程返回...清除掉那些最近最少使用的缓存; 基于权重的清除: 使用CacheBuilder.weigher(Weigher)指定一个权重函数,并且用CacheBuilder.maximumWeight(long)...,其他线程返回 这几个策略时间可以单独设置,也可以组合配置。...基于引用的清除(Reference-based Eviction) 构建Cache实例过程中,通过设置使用弱引用的键、或弱引用的、或软引用的,从而使JVMGC时顺带实现缓存的清除,不过一般不轻易使用这个特性...使用CacheBuilder构建的缓存不会”自动”执行清理和回收工作,也不会在某个缓存项过期马上清理,也没有诸如此类的清理机制。

    2.5K20

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

    这些方法允许开发者浏览器中保存和获取数据。 localStorage 用于「持久性存储数据」,数据会一直保留在用户的浏览器中,即使用户关闭了浏览器或重新启动设备。...key, value) 方法键值对数据存储到 Web Storage 中; 使用 getItem(key) 方法获取特定键的使用 removeItem(key) 方法删除指定键的数据; 使用 clear...(localStorage.getItem("cachedData")); // 使用缓存数据 // ... } else { // 从服务器获取数据 // ... // 数据存储到本地存储中...API 可以用于记住用户的登录状态,以便用户关闭浏览器再次访问网站时保持登录状态。...// ... } else { // 用户未登录,执行相应逻辑 // ... } 在上述示例中,当用户登录成功,我们登录状态设置为 'true' 并存储本地存储中。

    32740
    领券