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

为什么本地存储在页面刷新后也不能打开?

本地存储在页面刷新后也不能打开的原因是因为本地存储是基于浏览器的Web Storage API或者IndexedDB API实现的,而这些本地存储方式都是基于浏览器的会话(session)或者页面(page)的生命周期来存储数据的。当页面刷新时,会话或者页面会被重置,之前存储的数据也会被清空,因此无法再访问之前存储的数据。

Web Storage API提供了两种本地存储方式:localStorage和sessionStorage。localStorage是基于域名的,存储的数据在同一个域名下的不同页面之间是共享的,而sessionStorage是基于会话的,存储的数据在同一个页面的不同会话之间是共享的。无论是localStorage还是sessionStorage,当页面刷新时,存储的数据都会被清空。

IndexedDB API是一种更强大的本地存储方式,它提供了一个类似数据库的存储机制,可以存储大量结构化数据。IndexedDB的数据也是基于会话或者页面的生命周期来存储的,当页面刷新时,存储的数据也会被清空。

为了解决页面刷新后本地存储数据丢失的问题,可以考虑以下解决方案:

  1. 在页面刷新之前,将需要存储的数据通过Ajax请求或者其他方式发送到服务器端进行持久化存储,然后在页面加载完成后再从服务器端获取数据。
  2. 使用cookie来存储少量的数据,cookie可以设置过期时间,即使页面刷新后,仍然可以通过cookie获取之前存储的数据。
  3. 使用URL参数来传递需要保留的数据,将数据以参数的形式附加在URL上,在页面刷新后可以通过解析URL参数获取之前的数据。

总结起来,本地存储在页面刷新后不能打开是因为本地存储是基于浏览器会话或者页面生命周期的,当页面刷新时,会话或者页面被重置,之前存储的数据也会被清空。为了解决这个问题,可以考虑将数据持久化到服务器端、使用cookie或者URL参数来传递数据。

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

相关·内容

我是如何面试QA的。

Session生成的Session id是cookie里保存的,cookie被禁止可以通过URL重写来继续使用session 3. cookie不是安全,存放在本地的COOKIE可能被获取并进行COOKIE...只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据依然存在。但是sessionStorage关闭了浏览器窗口就会被销毁。...同时独立的打开同一个窗口同一个页面,sessionStorage也是不一样的。...2、快速显示数据: 性能好,从本地读数据比通过网络从服务器上获得数据快得多,本地数据可以及时获得,再加上网页本身可以有缓存,因此整个页面和数据都在本地的话,可以立即显示 。...3、临时存储: 很多时候数据只需要在用户浏览一组页面期间使用,关闭窗口数据就可以丢弃了,这种情况使用sessionStorage非常方便。

1.3K20

Cookie, Session, Token,WebStorage你懂多少?

Session生成的Session id是cookie里保存的,cookie被禁止可以通过URL重写来继续使用session 3. cookie不是安全,存放在本地的COOKIE可能被获取并进行COOKIE...只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据依然存在。但是sessionStorage关闭了浏览器窗口就会被销毁。...同时独立的打开同一个窗口同一个页面,sessionStorage也是不一样的。...2、快速显示数据: 性能好,从本地读数据比通过网络从服务器上获得数据快得多,本地数据可以及时获得,再加上网页本身可以有缓存,因此整个页面和数据都在本地的话,可以立即显示 。...3、临时存储: 很多时候数据只需要在用户浏览一组页面期间使用,关闭窗口数据就可以丢弃了,这种情况使用sessionStorage非常方便。

85810
  • H5 和移动端 WebView 缓存机制解析与实战

    正文 web项目开发中,我们可能都曾碰到过这样一个棘手的问题: 线上项目需要更新一个有问题的资源(可能是图片,js,css,json数据等),这个资源已经发布了很长一段时间,为什么页面浏览器里打开还是没有看到更新...Web缓存可以理解为Web资源Web服务器和客户端(浏览器)的副本,其作用体现在减少网络带宽消耗、降低服务器压力和减少网络延迟,加快页面打开速度等方面(笔者中国香港求学期间看到港台地区将cache译为...他们通常还会告诉你:ctrl+F5强刷一下,但是本文下面的内容将会说明为什么强制刷新去除缓存上不总是能奏效的,更何况对于线上项目而言,总不能让所有已经访问过的用户撸起袖子岔开两个手指都强制刷新一下吧?...强制刷新页面(Ctrl+F5),浏览器会直接忽略本地的缓存(有缓存会认为本地没有缓存),在请求中加上字段:Cache-Control:no-cache(或 Pragma:no-cache),发包向服务重新拉取文件...,但是还是不能看到最新的:那么有可能是使用了本地存储

    3.8K40

    #Vue 简单的 store 模式

    当错误出现时,我们现在会有一个 log 记录 bug 之前发生了什么` 2、引入 store / index.js // 需要使用 store 的 .vue 文件里面引入 import store...原因:刷新页面时,vue实例重新加载,从而,store被重置了。...store是用来存储组件状态的,而不是用来做本地数据存储的。所以,对于不希望页面刷新之后被重置的数据,使用本地存储来进行存储。 cookie: 不适合存储大量的数据。...localStorage: 是永久存储,浏览器关闭数据不会丢失,除非主动删除数据。当关闭页面重新打开,会读取上一次打开页面数据。...} } export default store // App.vue 中添加 mounted() { // 监听当浏览器窗口关闭或者刷新时 // window.addEventListener

    1.2K20

    很全很全的前端本地存储讲解

    就算设置了secure 属性并不代表他人不能看到你机器本地保存的 cookie 信息。...其实跟localStorage差不多,也是本地存储,会话本地存储 特点: 用于本地存储一个会话(session)中的数据,这些数据只有同一个会话中的页面才能访问并且当会话结束数据随之销毁。...因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。 也就是说只要这个浏览器窗口没有关闭,即使刷新页面或进入同源另一页面,数据仍然存在。...关闭窗口,sessionStorage即被销毁,或者新窗口打开同源的另一个页面,sessionStorage也是没有的。...注意:执行完调试工具栏Application的indexedDB中看不到,你得右键刷新一下。

    1.3K70

    都2022年了你还不知道Stronge本地存储

    localStorage 是 永久存储机制,sessionStorage 是跨会话的存储机制。 这两种浏览器存储 API 提供了浏览器中不受页面刷新影响而存储数据的两种方式。...sessionStorage和localStorage的区别 sessionStorage: 生命周期: 用于本地存储一个会话 (session) 中的数据, 这些数据只有同一个会话中的页面才能访问并且当会话结束数据随之销毁...关闭页面, sessionStorage 即被销毁, 即在新窗口新页面打开同源的另一个页面, sessionStorage 也是没有的. sessionStorage 除了协议, 主机名, 端口外,...localStorage 数据不受页面刷新影响,不会因关闭窗口、标签页或重新启动浏览器而丢失。...使用场景 我们很多后台管理页面中可以设置更改主题色,这个就是利用本地存储原理,将你选中的颜色存储客户端中。

    63930

    vuex页面刷新数据被清除

    用vuex来做全局的状态管理, 发现当刷新网页,保存在vuex实例store里的数据会丢失 产生原因 其实很简单,因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store...解决过程 选择合适的客户端存储 localStorage是永久存储本地,除非你主动去删除; sessionStorage是存储到当前页面关闭为止; cookie则根据你设置的有效时间来存储,但缺点是不能储存大数据且不易读取...vue是单页面应用,操作都是一个页面跳转路由;sessionStorage可保证打开页面时sessionStorage的数据为空,而如果是localStorage则会读取上一次打开页面的数据。...因为我们是只有刷新页面时才会丢失state里的数据,想法点击页面刷新时先将state数据保存到sessionStorage,然后才真正刷新页面 beforeunload这个事件页面刷新时先触发的。...我们总不能每个页面都监听这个事件,所以选择放在app.vue这个入口组件中,这样就可以保证每次刷新页面都可以触发。

    3.1K00

    H5缓存机制浅析

    强制刷新页面(Ctrl+F5),浏览器会直接忽略本地的缓存(有缓存会认为本地没有缓存),在请求中加上字段:Cache-Control:no-cache(或 Pragma:no-cache),发包向服务重新拉取文件...另外 Dom Storage 存储的数据本地,不像 Cookies,每次请求一次页面,Cookies 都会发送给服务器。...sessionStorage 用来存储页面相关的数据,它在页面关闭无法使用。而 localStorage 则持久存在,页面关闭可以使用。...把上面的代码复制到 session_storage.html(可以从附件中直接下载)页面中,用 Google Chrome 浏览器的不同 PAGE 或 WINDOW 打开输入框中分别输入不同的文字...我们 Google Chrome 浏览器中打开这个 HTML 链接,JS 功能正常,图片显示正常。禁用网络,关闭浏览器重新打开这个链接,发现 JS 工作正常,图片显示正常。

    1.8K80

    关于Cookie、session和localStorage、以及sessionStorage之间的区别和联系,超详细

    若设置了过期时间,浏览器就会把cookie保存到硬盘上,关闭打开浏览器这些cookie仍然有效直到超过设定的过期时间。...,即使刷新页面或进入同源另一个页面,数据仍然存在,关闭窗口,sessionStorage就会被销毁,同时“独立”打开的不同窗口,即使是同一页面,sessionStorage对象也是不同的 Web...,从本地读数据比通过网络从服务器上获得数据快得多,本地数据可以及时获得,再加上网页本身可以有缓存,因此整个页面和数据都在本地的话,可以立即显示 3、临时存储:很多时候数据只需要在用户浏览一组页面期间使用...,关闭窗口数据就可以丢弃了,这种情况使用sessionStorage非常方便 四、浏览器本地存储与服务器端存储的区别 其实数据既可以浏览器本地存储可以服务器端存储 浏览器可以保存一些数据...,需要的时候直接从本地存取,sessionStorage、localStorage和cookie都是由浏览器存储本地的数据 ,服务器端可以保存所有用户的所有数据,但需要的时候浏览器要向服务器请求数据

    3.1K10

    IndexDB实现一个本地数据库的增删查改

    阅读本文之前,本文主要从以下几点去探讨IndexDB 为什么会有IndexDB,本地localStorage与sessionStorage不够用吗 IndexDB有何特征 以一个示例加深对于IndexDB...那么会有以下几个步骤 打开数据库,创建本地数据库并连接IndexDB.open('lcoal-test') 创建对象库db.createObjectStore('user') 基于事务操作本地数据库,实现增删查改...,我们打开页面看下 新增 现在我们新增一条数据,页面点击新增按钮,applcation/Storage/IndexDB中就会保存一条数据 当我们刷新时,数据页面仍然会保留上一次的数据 我们新增操作...而且你删除,当你刷新页面,那条数据就真的没有,当你新增一条数据,只要你不删除,那么打开页面数据就会一直页面中。...,因为IndexDB可以存储足够大的数据量,你只需要保证你存的Schema数据能正常渲染你的页面就行,或者你的暂存操作可以不用服务端处理,暂存功能完全可以依赖客户端做,这样会减少服务端的压力。

    1.3K20

    浏览器缓存机制浅析

    核心就是把缓存的内容保存在了本地,而不用每次都向服务端发送相同的请求,设想下每次都打开相同的页面,而在第一次打开的同时,将下载的js、css、图片等“保存”本地,而之后的请求每次都在本地读取,效率是不是高了很多...真正的浏览器工作的时候并不是将完整的内容保存在本地,各种浏览器都有不同的方式,譬如firefox是一种类似innodb的方式存储的key value 的模式,地址栏中输入 about:cache 可以看见缓存的文件...需要注意的是,浏览器会在第一次请求完服务器得到响应,我们可以服务器中设置这些响应,从而达到以后的请求中尽量减少甚至不从服务器获取资源的目的。浏览器是依靠请求和响应中的的头信息来控制缓存的。...,我们发现这个日期是遥远的2013年,也就是说这个jquery文件自从2013年的那个日期就没有再被修改过了。...或许你会问为什么它优先?两者功能相似甚至相同,为什么要同时存在?

    51710

    【查缺补漏】 15个高频微信小程序面试题

    小程序 WXSS 与 CSS 的区别 WXSS wxss 背景图片只能引入外链,不能使用本地图片 小程序样式使用 @import 引入 外联样式文件,地址为相对路径。...小程序的生命周期函数 onLoad : 页面加载时触发。一个页面只会调用一次,可以 onLoad的参数中获取打开当前页面路径中的参数 onShow : 页面显示 / 切入前台时触发调用。...使用全局变量 app.js 中的 this.globalData = { } 中放入要存储的数据。...使用 路由 wx.navigateTo 和 wx.redirectTo 时,可以通过 url 拼接 + 变量, 然后 目标页面 通过 onLoad 周期中,通过参数来获取传递过来的值...小程序进入后台之后,客户端会帮我们一定时间内维持我们的一个状态,超过五分钟,会被微信主动销毁.

    1.6K52

    15个高频微信小程序面试题

    小程序 WXSS 与 CSS 的区别 WXSS wxss 背景图片只能引入外链,不能使用本地图片 小程序样式使用 @import 引入 外联样式文件,地址为相对路径。...小程序的生命周期函数 onLoad : 页面加载时触发。一个页面只会调用一次,可以 onLoad的参数中获取打开当前页面路径中的参数 onShow : 页面显示 / 切入前台时触发调用。...使用全局变量 app.js 中的 this.globalData = { } 中放入要存储的数据。...使用 路由 wx.navigateTo 和 wx.redirectTo 时,可以通过 url 拼接 + 变量, 然后 目标页面 通过 onLoad 周期中,通过参数来获取传递过来的值...小程序进入后台之后,客户端会帮我们一定时间内维持我们的一个状态,超过五分钟,会被微信主动销毁.

    85810

    15个高频微信小程序面试题

    小程序 WXSS 与 CSS 的区别 WXSS wxss 背景图片只能引入外链,不能使用本地图片 小程序样式使用 @import 引入 外联样式文件,地址为相对路径。...小程序的生命周期函数 onLoad : 页面加载时触发。一个页面只会调用一次,可以 onLoad的参数中获取打开当前页面路径中的参数 onShow : 页面显示 / 切入前台时触发调用。...使用全局变量 app.js 中的 this.globalData = { } 中放入要存储的数据。...使用 路由 wx.navigateTo 和 wx.redirectTo 时,可以通过 url 拼接 + 变量, 然后 目标页面 通过 onLoad 周期中,通过参数来获取传递过来的值...小程序进入后台之后,客户端会帮我们一定时间内维持我们的一个状态,超过五分钟,会被微信主动销毁.

    6.4K11

    【前端词典】F5 同 Ctrl+F5 的区别你可了解

    前言 今天把代码部署到测试环境,告知产品 UI 问题已修复。几分钟过后,产品说问题还可以复现。而后去产品那才发现她一直使用 F5 刷新页面。...其实 F5 和 Ctrl+F5 使用的频率是很高的,可是使用的时候有没有想过 F5 和 Ctrl+F5 的区别是什么? 这篇文章会将 F5 和 Ctrl+F5 刷新页面的原理讲清楚。...已经之前的某个时间加载过该资源,但是此资源不会随着该页面的关闭而释放掉,因为是存在硬盘当中的,下次打开仍会 fromdisk cache。...这是因为按 F5 进行页面刷新时请求头会添加 If-Modify-Since 字段,如果资源未过期,命中缓存,服务器就直接返回 304 状态码,客户端直接使用本地的资源。...读完 F5 同 Ctrl+F5 刷新页面的原理,其实你把强缓存和协商缓存的区别复习了一遍。

    98230

    H5 缓存机制浅析 移动端 Web 加载性能优化

    强制刷新页面(Ctrl+F5),浏览器会直接忽略本地的缓存(有缓存会认为本地没有缓存),在请求中加上字段:Cache-Control:no-cache(或 Pragma:no-cache),发包向服务重新拉取文件...另外 Dom Storage 存储的数据本地,不像 Cookies,每次请求一次页面,Cookies 都会发送给服务器。...sessionStorage 用来存储页面相关的数据,它在页面关闭无法使用。而 localStorage 则持久存在,页面关闭可以使用。...把上面的代码复制到 session_storage.html(可以从附件中直接下载)页面中,用 Google Chrome 浏览器的不同 PAGE 或 WINDOW 打开输入框中分别输入不同的文字...当然也有可能是浏览缓存起的作用,我们可以文件的浏览器缓存过期,禁用网络再试,发现 HTML 页面也是正常的。

    2.2K20

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

    二、cookie存储机制 cookie通常用来存储相对不敏感的信息,例如记住用户名密码、登录控制等。由于cookie的存储是浏览器进行的操作,因此不同浏览器的存储机制不相同。...因此当有大量内容需要存储本地时,需要使用本地存储技术,此技术使用javascript可以实现。...3)其他注意事项 任何格式的存储会被转换成字符串,因此如果需要存储数组等信息时,可以先用json将内容转换成特定格式的字符串,取出时转回去。...当每次重新刷新或加载页面,则去获取cookie,如果存在则赋值给输入框,如果不存在则将输入框制空。 设置保存用户名按钮,保存2小时。关闭浏览器再次打开仍然会存在。 设置取消保存,再次刷新则获取到空。...刷新页面,发现用户名已经消失,关闭再次打开浏览器同样没有 ? 3)实现源码 a.

    2.1K50

    浏览器缓存机制浅析

    核心就是把缓存的内容保存在了本地,而不用每次都向服务端发送相同的请求,设想下每次都打开相同的页面,而 第一次打开的同时,将下载的js、css、图片等“保存”本地,而之后的请求每次都在本地读取,效率是不是高了很多...真正的浏览器工作的时候并不是 将完整的内容保存在本地,各种浏览器都有不同的方式,譬如firefox是一种类似innodb的方式存储的key value 的模式,地址栏中输入 about:cache...需要注意的是,浏览器会在第一次请求完服务器得到响应,我们可以服务器中设置这些响应,从而达到以后的请求中尽量减少甚至不从服务器获取资源的目的。浏览器是依靠请求和响应中的的头信息来控制缓存的。...然后我主页按下ctrl+r刷新,因为ctrl+r会默认跳过max-age和Expires的检验直接去向服务器发送请求(下文再探讨各种刷新如何读取缓存),我们看看请求截图: ?...或许你会问为什么它优先?两者功能相似甚至相同,为什么要同时存在?

    85740
    领券