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

为什么每次我重新加载页面时我的localStorage都是空的?

每次重新加载页面时,localStorage都是空的可能是由于以下几个原因:

  1. localStorage是浏览器提供的一种本地存储机制,用于在浏览器中保存数据。它是基于域名的,即每个域名都有自己独立的localStorage。如果你在不同的域名下重新加载页面,localStorage的数据是不会跨域名共享的,因此会出现localStorage为空的情况。
  2. localStorage是基于键值对的存储方式,如果你在重新加载页面之前没有正确地存储数据到localStorage中,那么重新加载页面时localStorage自然是空的。请确保在页面加载时正确地使用setItem()方法将数据存储到localStorage中。
  3. 另外,localStorage中的数据是永久保存的,除非手动清除或者代码中进行删除操作,否则数据会一直存在。但是,有些浏览器在隐私模式下会禁用localStorage,导致重新加载页面时localStorage为空。请确保你的浏览器不是在隐私模式下运行。

综上所述,重新加载页面时localStorage为空可能是由于跨域名、未正确存储数据或浏览器隐私模式等原因导致的。如果你需要在重新加载页面时保留localStorage中的数据,可以考虑使用其他方式,如使用服务器端存储或使用cookie等。

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

相关·内容

#PY小贴士# 我的git仓库为什么每次提交都有很多改动?

今天说一个 git 使用时的细节:.gitignore 我们在使用 git 管理代码时,如果默认把项目里的所有文件都 add 进去,加入到仓库中,会有几方面问题: 不必要的文件被加入,导致仓库很大...自动生成的文件被加入,会导致频繁改动,并容易产生版本冲突 带有敏感信息的文件被加入,造成信息泄露 那么到底哪些文件应该被提交到仓库里呢?...其实就一个原则:git 只用来上传代码,其他的都不应该加到仓库里 应当忽略的文件包括: 系统生成的临时文件 编译产生的结果文件(比如 .pyc) 用户数据(这个尤其不能加仓库里) 个人开发环境相关的配置文件...x.pyc # 忽略根目录下 TMP 文件夹中的文件 /TMP # 忽略所有名为 build 文件夹中的文件 build/ # 忽略名为 doc 文件夹里的 .txt 结尾的文件(不包含子目录)...doc/*.txt # 忽略名为 doc 文件夹里的 .pdf 结尾的文件(包含子目录) doc/**/*.pdf 另外,Github 也提供了很多不同语言/项目适用的 .gitignore 文件模板供使用

64910
  • 我是如何将页面加载时间从6S降到2S的?

    问题的复盘 某一天海外运营告知说最近几天的海外站点pv,uv下降严重,希望技术帮忙查看一下原因。WTF,这跟技术有毛线关系,该用的都用了,TM的页面不吸引人,用户不想来,我能怎么办?...我觉得主要有两个因素来判断CDN服务的优劣---命中率和节点数量。 命中率意味着是否回源,回源的请求会打到你的服务器上,那么加载时间就取决与用户与你服务器的通讯状态了,说白了就是听天由命。...节点数多意味着可供用户选择的响应节点多,优中选优,不必多说了,优秀。 网页加载时间 网页加载时间其实可以看作是页面响应时间。那么,它是由哪些部分组成的?影响因素都有哪些?哪些我们是可以优化的?...换成了aws,同样为我们节省了很多加载时间(注册和开通相对麻烦,但是为了用户体验这些都是值得的) 后端性能优化 如何进行后端优化可以写几本书毫不夸张,但是我们做的就是加配置,有钱人性。...9C%8D%E5%99%A8 ,这些主机的内容都是同步的) ,然后最高等级服务器告诉它你去找.com的DNS,我不管。

    87620

    vuex在页面刷新后数据被清除

    用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失 产生原因 其实很简单,因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store...vue是单页面应用,操作都是在一个页面跳转路由;sessionStorage可保证打开页面时sessionStorage的数据为空,而如果是localStorage则会读取上一次打开页面的数据。...那怎么才能不用每次修改state时同时也要修改sessionStorage呢?...因为我们是只有在刷新页面时才会丢失state里的数据,想法在点击页面刷新时先将state数据保存到sessionStorage,然后才真正刷新页面 beforeunload这个事件在页面刷新时先触发的。...export default { name: 'App', created () { //在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem

    3.1K00

    PHP网络技术(五)——cookie及记住用户名功能实现

    一、PHP设置cookie方式 1)setcookie(name,value,expire,path,domain,secure,httponly) 第一个参数是必填的,后面都是选填的...path是有效路径,domain是作用域名(如果设置的不对会导致刷新或者重新打开浏览器时无法获取cookie),secure是加密传输(主要用于https)。...‘val1’ 或 localStorage.setItem(‘key1’, ‘val1’),当设置同样的key时,后面的设置会覆盖前面的设置。...当每次重新刷新或加载页面,则去获取cookie,如果存在则赋值给输入框,如果不存在则将输入框制空。 设置保存用户名按钮,保存2小时。关闭浏览器再次打开仍然会存在。 设置取消保存,再次刷新则获取到空。...,一开始domain我设置的不对,导致刷新页面一直没有反应。

    2.2K50

    了解 Session、LocatStorage、Cache-Control、ETag

    由于 HTTP 协议是无状态的协议,所以服务端需要记录用户的状态时,就需要用某种机制来识具体的用户,这个机制就是 Session....,以后每次请求把这个会话 ID 发送到服务器,我就知道你是谁了。...是 html5 技术提供的一个 API,session 是服务器上的哈希表localStorage 的实质就是一个哈希表,是浏览器上的哈希表localStorage.setItem () 接受两个参数,...() 不接受参数,清空 key、value都是用来操作当前页面里面的哈希表localStorage 不存在与页面里,它存在 C 盘的一个文件里session 的缺点就是占内存应用:场景:页面更新,提示用户...ETag用 cache-Control 是不请求,ETage 是直接不下载,但还是有请求,但是响应体是空的打开一个网页,初次打开会有一个 ETag,以后再打开它的时候请求里有一个 if-none-match

    87350

    localStorage的黑科技-js和css缓存机制

    呵呵,以下勾起了我侦探的欲望。页面加载后的异常点就是只加载了一个js,如下图所示: ? 我很诧异,为什么已经开启了Disable cache,js只加载了一个,而且体积这么小。...心里一阵澎湃,这不是我之前就想实现的加载性能优化的想法吗!乖乖,我孤陋寡闻了,已经有前端团队实现了代码。...前端根据配置信息,进行匹配和比较,最终决定 使用localStorage缓存,还是重新发起请求,下载最新的资源文件。...微信判断该版本是否最新,就是用该value值与后台输出的配置信息进行比较,最后得出是否更新的结果。  如果value值与配置信息一致,则使用缓存。否则,重新发起请求加载。...PC端做LS缓存,起到的优化作用不大。 六、番外 有兴趣的童鞋,还可以看看知乎上大神们的讨论,静态资源(JS/CSS)存储在localStorage有什么缺点?为什么没有被广泛应用?

    4.3K20

    微前端框架qiankun项目实战(二)--踩坑与部署篇

    可以看到,当点击菜单切换时,都是空心图标,这明显有问题啊!我们明明一个有心有个无心! 如何解决?..."iconfont"; 大家可以看到两个项目的iconfont.css都有这么一句话,然后引入的方式都是class="iconfont icon-xxx"的方式,我改造的项目也是如此,我猜测上面的问题跟这个有很大的关系...,事实证明了我猜想是对的,下面我们来改造一下 首先回到iconfont的官网,去到我们刚刚添加的图标库页面,有个项目设置选项,点击后会看到如下两个选项 ?...为什么会这样呀??可以看到无论是本地还是测试服务器都是没有任何报错的,然后这个问题我搞了几乎3天 如何解决?...到了第三天的时候,我差不多想放弃微前端改造方案了,突然我发现,我们点击菜单的时候,url是有变化的,但是页面没有跳转,所以我又大胆猜测,是不是路由的问题,而且可以看到,每次我们在主微应用之间切换的时候,

    1.9K40

    近一年web前端经典面试题整理

    八、session与窗口的关系 每个session对象都与浏览器一一对应 重新开启一个浏览器,相当于重新创建一个session对象重新开启一个IE窗口,直接访问系统首页面 通过超链接打开的新窗口,新窗口的...每次写完关闭之后重新调用该函数,会导致页面被重写。 innerHTML则是DOM页面元素的一个属性,代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。...2.使用visibility:hidden比display:none性能上要好,display:none切换显示时visibility, 页面产生回流(当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等...,页面重新构建, 此时就是回流。...所有页面第一次加载时需要产生一次回流), 而visibility切换是否显示时则不会引起回流。 十五、$(document).ready()方法和window.onload有什么区别?

    1.4K20

    前端静态资源缓存策略

    背景 页面加载提速是战场,首当其冲要优化的就是 静态资源(js|css) 的加载速度。我们小组去年基于Vue开发了一个积分商城单页面应用。...307kb app.hash.js 68.6kb 剩下的都是webpack异步按需加载。...因此可以使我们防止不必要的重新请求资源,提升网站加载速度。 说人话就是:把首页实时加载的资源在首次加载时全部缓存到LocalStorage中,二次进入时就不需要发起网络请求了。...比如我们设置过期时间是3天,这里我并没有使用createTime去比较,而是使用visitTime,原因是访问时间每次都会被更新,也就能够延长缓存寿命。...对于一个活跃用户,经常访问你的页面,在你没有发布新版变更的前提下,用户只要在3天之内再度访问,所有本地资源寿命会被再延长3天,这种机制尤其适用于你的vendor.js,因为这里面打包都是第三方库,变更频率是很低的

    3.3K90

    前端面试如何回答,这些题目或许可以给你一些提示

    ,有一种就是我们常用的直接引入,还有两种就是使用 async 属性和 defer 属性来异步引入,两者都是去异步加载外部的JS文件,不会阻塞DOM的解析(尽量使用异步加载)。...(4)减少回流与重绘:操作DOM时,尽量在低层级的DOM节点进行操作不要使用table布局, 一个小的改动可能会使整个table进行重新布局使用CSS的表达式不要频繁操作元素的样式,对于静态页面,可以修改类名...当然不仅仅路由可以按需加载,对于 loadash 这种大型类库同样可以使用这个功能。按需加载的代码实现这里就不详细展开了,因为鉴于用的框架不同,实现起来都是不一样的。...中,还有网站的一些不常变动的个人信息等也可以存储在本地的LocalStorage中(3)SessionStorageSessionStorage和LocalStorage都是在HTML5才提出来的存储方案...在滚动屏幕之前,可视化区域之外的图片不会进行加载,在滚动屏幕时才加载。这样使得网页的加载速度更快,减少了服务器的负载。懒加载适用于图片较多,页面列表较长(长列表)的场景中。

    61020

    本地存储应用案例 ToDoList

    2、toDoList 分析 刷新页面不会丢失数据,因此需要用到本地存储 localStorage 核心思路: 不管按下回车,还是点击复选框,都是把本地存储的数据加载到页面中,这样保证刷新关闭页面不会丢失数据...       localStorage.setItem("todolist", JSON.stringify(data));   }; 4、本地存储数据渲染加载到页面 因为后面也会经常渲染加载操作...每次渲染之前,先把原先里面 ol 的内容清空,然后渲染加载最新的数据。...saveData(data);        // 重新渲染页面        load(); ​   }) 6、正在进行和已完成选项操作 当我们点击了小的复选框,修改本地存储数据,再重新渲染数据列表...之后保存数据到本地存储 重新渲染加载数据列表 load 加载函数里面,新增一个条件,如果当前数据的done为true 就是已经完成的,就把列表渲染加载到 ul 里面 如果当前数据的done

    2.4K20

    两步教你在Vue中设置登录验证拦截!

    今天在做vue和springboot交互的一个项目的时候,想要基于前端实现一些只有登录验证之后才能访问某些页面的操作,所以在这里总结一下实现该功能的一个解决方案, 首先说一下我是如何判断是否已经登录的,...首先我在store文件下的index.js文件中封装了一个SET_TOKEN方法,用来将token存储到浏览器,这样我们每次就都可以通过localStorage.getItem(“token”),来从本地拿到我们的...: (state, userInfo) => { state.userInfo = userInfo; //session会在每次浏览器关闭时清空,在重新登录后再生成...(userInfo)); }, //移除用户信息 REMOVE_INFO: (state) => { //移除用户信息时将用户所有的信息都置为空...//判断当前的token是否存在,也就是登录时的token if (token){ //如果指向的是登录页面,不做任何操作 if (to.path

    1.1K20

    浏览器的常见考点

    问题一览: 加载页面和渲染过程 渲染线程和 JS 引擎线程 重绘和回流 页面生命周期 property 和 attribute 区别 cookie、localStorage 以及 sessionStorage...AJAX && 跨域 加载页面和渲染过程 题目:浏览器从加载页面到渲染页面的过程。...除此之外,这还能解释为什么script标签为什么会阻塞 DOM 树渲染,毕竟 JS 是可以修改 DOM 的,如果 JS 执行的时候 UI 也工作,就有可能导致不安全的渲染。...beforeunload在用户即将离开页面时触发,它返回一个字符串,浏览器会向用户展示并询问这个字符串以确定是否离开。...每次会被携带在 http 头中,所以数据量过大的时候有性能问题。 localStorage:大小限制为 5MB,用于永久存储信息,也可以用于缓存 ajax 信息用于离线应用。

    1K20

    「原生案例」如何在JavaScript中实现实时搜索功能

    每次调用函数时,我们需要清除 resultsContainer ,并将 moviesUnavailableTxt 设置为 display="none" ,因为我们希望在渲染电影到页面时文本不可见,同时清除...通过缓存这个项目,我们将能够在页面重新加载时使用API的数据,而无需进行额外的 fetch 请求。...但是对于这个项目,我们将为我们的缓存数据设置一个过期时间,为6小时,这意味着页面每6小时只会进行一次API请求,而不是在每次页面重新加载时都进行请求。...就是这样,这就是我们如何将数据缓存起来以便重复使用,而不是在每次用户输入或每次页面重新加载时发起请求。正如你所看到的,这将极大地优化应用程序的性能,因为它可以防止由于网络慢而导致的电影渲染缓慢。...通过在您的网站上实现实时搜索功能,您可以增强用户参与度,提高您的网站或应用程序的可用性。用户将欣赏能够快速方便地找到相关信息,而无需重新加载页面。

    1.3K40

    2022秋招前端面试题(一)(附答案)

    所谓的浏览器缓存指的是浏览器将用户请求过的静态资源,存储到电脑本地磁盘中,当浏览器再次访问时,就可以直接从本地加载,不需要再去服务端请求了。...Webkit 和 Firefox 都做了这个优化,当执行 JavaScript 脚本时,另一个线程解析剩下的文档,并加载后面需要通过网络加载的资源。这种方式可以使资源并行加载从而使整体速度更快。...LocalStorage的优点:在大小方面,LocalStorage的大小一般为5MB,可以储存更多的信息LocalStorage是持久储存,并不会随着页面的关闭而消失,除非主动清理,不然会永久存在仅储存在本地...中,还有网站的一些不常变动的个人信息等也可以存储在本地的LocalStorage中(3)SessionStorageSessionStorage和LocalStorage都是在HTML5才提出来的存储方案...,SessionStorage 主要用于临时保存同一窗口(或标签页)的数据,刷新页面时不会删除,关闭窗口或标签页之后将会删除这些数据。

    1.1K30

    前端数据缓存 & 版本管理方案总结

    本地缓存存储选型 2.1 前端存储选型 目前,前端存储有以下几类: cookie 在 H5 之前最主要的前端存储方式,大小限制 4K,且每次请求都会在请求头带上 localStorage 以键值对...2.2 localStorage 封装支持设置有效期 将 window.localStorage 封装到 Storage 类中,该类包含三个静态方法:set、get、del,而过期时间的实现是通过每次...在 UI 编辑器项目中,页面的 json 数据会有一个 time 字段标记数据的生成时间。页面加载时,会选择最新的数据用于加载。...(不存在时本地新建空数据) let jsonData = jsonDataFromServer // server / local 都存在时,选用最新的数据 if (jsonDataFromServer.time...版本一致性校验保障 若后端 db 存储数据时不进行版本校验,当页面 1 和页面 2 都加载了版本1数据,若页面 1 执行保存更新后端数据为版本 2 后,页面 2 再执行保存时,由于版本 3 是基于版本

    2.9K73

    滴滴前端一面必会面试题汇总

    懒加载也叫延迟加载,指的是在长网页中延迟加载图片的时机,当用户需要访问时,再去加载,这样可以提高网站的首屏加载速度,提升用户的体验,并且可以减少服务器的压力。...懒加载的实现原理是,将页面上的图片的 src 属性设置为空字符串,将图片的真实路径保存在一个自定义属性中,当页面滚动的时候,进行判断,如果图片进入页面可视区域内,则从自定义属性中取出真实路径赋值给图片的...我了解的预加载的最常用的方式是使用 js 中的 image 对象,通过为 image 对象来设置 scr 属性,来实现图片的预加载。CSS预处理器/后处理器是什么?为什么要使用它们?...利用一个属性保存系统中目前所占空间大小,每次存储都增加该属性。当该属性值大于 1M 时,需要按照时间排序系统中的数据,删除一定量的数据保证能够存储下目前需要存储的数据。...每次取数据时,需要判断该缓存数据是否过期,如果过期就删除。

    47820

    HTML 面试知识点总结

    (2)加载顺序区别。加载页面时,link 标签引入的 CSS 被同时加载;@import 引入的 CSS 将在页面加载完毕后被加载。 (3)兼容性区别。...页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会 保持原来的页面会话。在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话。...cookie 其实最开始是服务器端用于记录用户状态的一种方式,由服务器设置,在客户端存储,然后每次发起同源请求时,发送给服 务器端。...(3)纯 js 实现,判断一个点在不在圆上的简单算法,通过监听文档的点击事件,获取每次点击时鼠标的位置,判断该位置是否在我 们规定的圆形区域内。...前端性能优化主要是为了提高页面的加载速度,优化用户的访问体验。我认为可以从这些方面来进行优化。

    1.9K20
    领券