关于页面刷新和storage的理解

最新推荐文章于 2024-04-12 10:49:51 发布
最新推荐文章于 2024-04-12 10:49:51 发布
阅读量749 收藏
点赞数
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yusun1234/article/details/123177311
版权

1、页面刷新会改变哪些东西？

会重新把当前页面的接口调一遍，存储在storage和路由中的数据不会改变。

2、storage 和 路由

持久存储技术，HTML5提供了一种新的存储技术---storage，不用都放在cookie中了，每次请求新页面时，使用cookie每次都要发送过去，并且存储大小4kb。

storage分两种，sessionStorage、localStorage,

sessionStorage 存储页面相关的数据，（但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。）关闭页面，数据则消失

在vue中，跨路由的session互相访问部了。

localStorage 持久存储，关闭页面，数据不会消失，所以要手动清空

落魄小二
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用Storage Event实现页面间通信的示例代码
09-22
主要介绍了利用Storage Event实现页面间通信的示例代码的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
nfs部署StorageClass
04-03
NFS版PV动态供给StorageClass
浏览器存储
SongGLing的博客
08-01 1979
Cookie 的劣势 存储大小限制，仅 4kb 左右单个域名下的数量限制，50个左右污染请求头，浪费流量 本地存储 - Web Storage ❝ localStorage 和 sessionStorage 区别 相同的使用方法不同的存储时效不同的储存容量 ❞ 不同的存储时效 localStorage 存储会持久化（没有储存时间）sessionStorage 存储会在网页会话结束后失效，刷新没有问题 不同的储存容量 localStorage 容量一般在 2~5Mb 左右sessionStorage
浏览器数据存储方式总结---localStorage、sessionStorage、cookie
yiyueqinghui的博客
10-19 4951
1、cookie 1.1、cookie的作用 说到cookie，其实cookie有两个主要功能， 用于解决http无状态的缺点，在客户端存储会话信息，记录用户的状态 也就是我们现在也经常使用cookie在客户端存储一些数据 1.2、cookie的构成 一般来说，cookie是由浏览器保存的以下几块信息构成的 （1）名称：一个唯一确定cookie的名称 （2）值：存储在cookie中的字符串值，值必须被URL编码 （3）域：cookie对于哪个域是有效的，所有向该域发送的请求都会包含这个cookie信息
vue利用会话(sessionStorage)实现浏览器刷新后，值被重置问题
最新发布
BlackMamba_H的博客
04-12 137
2. 利用本地存储(localStorage、sessionStorage、cookie)实现，这里使用sessionStorage来实现，因为localStorage是永久存储在本地，除非你主动去删除，而cookie则根据你设置的有效时间来存储，缺点就是不能储存大数据并且不易读取。具体可根据业务需求去选用。注意：sessionStorage保存的数据是以字符串形式保存的。即使你保存的是数字，取出来的也是字符串。效果：标签页切换后页面刷新，保存刷新前选中的标签页。
[html] 页面刷新时sessionStroage会变（会清空）吗？
歌谣的博客
04-04 4521
[html] 页面刷新时sessionStroage会变（会清空）吗？ 不会 SessionStroage 是数据页面会话级别的, 当你在打开这个页面的时候会被创建, 并且重新加载或恢复页面仍会保持原来的页面会话... 当你在关闭对应浏览器Tab的时候会被清出 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
本地存储 localStorage和 会话存储 sessionStorage
weixin_58414196的博客
07-04 547
sessionStorage关闭、刷新页面数据会消失 localStorage不会 除非手动删除1、// 把数据存储到本地 sessionStorage.setItem("key", "val");2、// 获取数据 sessionStorage.getItem("key")3、// 删除指定数据 sessionStorage.removeItem("key");4、// 删除所有数据 sessionStorage.clear();.........
vue使用sessionStorage实现刷新页面不会触发自己的方法
qq_41926051的博客
06-08 342
如果想删除设置的session,则调用sessionStorage.removeItem("noticePopNameSession");
vuex页面刷新后数据丢失的方法
12-11
（2）刷新页面，以前申请的内存被释放，重新加载脚本代码，变量要重新赋值。 （3）要想刷新后数据不丢失就必须把数据存储在外部，例如：Local Storage、Session Storage、Index DB等。这些都是浏览器提供的API，让你...
storage(已通关).circ
12-18
storage.circ(已通关)华中科技大学计算机组成原理存储系统实验
解决vuex数据页面刷新后初始化操作
11-20
1、利用storage缓存来实现vuex数据的刷新问题 我们可以在mutation等vuex的方法中对于数据进行改变时，将数据同时存储进我们的本地浏览器缓存中；下面是我在mutation中写的方法； 同步将数据的更改保存，也可以在...
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
08-27
localStorage没有时间期限，除非将它移除，sessionStorage即会话，当浏览器关闭时会话结束，有时间期限，具有自行百度。本文使用的是sessionStorage解决vuex在页面刷新后数据被清除的问题,需要的朋友可以参考下
sessionStorage
yes_catherine的博客
08-13 428
sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。 测试： 1 页面刷新后是否丢失 答案：不会 2 同一页面在不同tab页是否会相互影响 答案：不会 代码逻辑：每set一次sessionStorage中存储的数字加1 两个tab页完全不影响 ...
vuex 页面刷新数据丢失问题及解决办法
学海无涯，回头是岸
02-09 606
页面刷新时，将重新初始化vuex的数据，导致无法获取数据，使得页面数据丢失。 解决办法 修改store文件下Index中state的定义 const store = new Vuex.Store({ state:sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')): ........
vuex结合session存储数据，解决页面刷新数据丢失问题
qq_41552234的博客
09-08 4278
vuex结合session存储数据，解决页面刷新数据丢失问题 文章目录vuex结合session存储数据，解决页面刷新数据丢失问题前言一、原因：二、解决思路：1.本地存储方法:2.实现步骤：3.优化： 前言 在项目中表单筛选项里，选择完之后刷新页面数据就变了，没有保留在自己选择的选项上。 在项目中是使用vuex保存数据，但是网页刷新后，store中保存的数据丢失了。 提示：以下是本篇文章正文内容，下面案例可供参考 一、原因： vuex作为全局的数据状态管理机制，store中的数据是保存在运行内存中，
HTML5 使用sessionStorage实现页面返回刷新
weixin_30314813的博客
02-01 347
需求：在某个列表页面跳转到增加新项目页面后需要返回到前一个页面 并且数据最新数据。刚开始是做法是history.back();方法 返回后页面不会自动刷新的。在新的页面重新访问之前页面的链接可以访问到新加载了新数据的页面，但这样子也会导致页面加载过多占内存。 这个时候可以用sessionStorage来存储临时变量来判断 母页面： window.onload = functi...
Cookie、session和localStorage、以及sessionStorage之间的区别
WebDestiny的博客
08-29 517
一、Cookie、session和localStorage的区别 cookie的内容主要包括：名字、值、过期时间、路径和域。路径与域一起构成cookie的作用范围。若不设置时间，则表示这个cookie的生命期为浏览器会话期间，关闭浏览器窗口，cookie就会消失。这种生命期为浏览器会话期的cookie被称为会话cookie。 会话cookie一般不存储在硬盘而是保存在内存里，当然这个行为并不是...
vuex页面刷新数据丢失问题（sessionStorage解决）
黎小小的博客
06-30 1938
vuex中的变量是响应式的，数据存储在内存中，页面手动刷新后数据就丢失了，所以将数据放进sessionStorage(是存储到当前页面关闭为止，和其他tab页没关联)中 另外也可以通过安装插件方式解决（以下三种方式都可以）： 另外通过sessionStorage取出的数据是对象数组[Object,Object]格式，需要存储时通过JSON.stringify(payload)处理数据，取出时通过JSON.parse(sessionStorage.getItem("BANNERS_INFO"))处理
vue3 pinia页面刷新报错
01-18
在Vue 3中使用Pinia进行状态管理时，如果在页面刷新时出现报错，可能是因为Pinia的状态没有正确地进行持久化。为了解决这个问题，你可以使用插件来实现状态的持久化。 一种常见的解决方案是使用`vue-router`和`vuex-persistedstate`插件。下面是一个示例： 1. 首先，安装所需的依赖： ```shell npm install vue-router vuex-persistedstate ``` 2. 在你的Vue项目中，创建一个`plugins`文件夹，并在其中创建一个名为`persistedstate.js`的文件。 3. 在`persistedstate.js`文件中，添加以下代码： ```javascript import createPersistedState from 'vuex-persistedstate'; export default ({ store }) => { createPersistedState({ key: 'your-key', // 设置一个唯一的键名 storage: window.sessionStorage, // 使用sessionStorage进行状态持久化 })(store); }; ``` 4. 在你的Vue项目的入口文件（通常是`main.js`）中，添加以下代码： ```javascript import { createApp } from 'vue'; import { createPinia } from 'pinia'; import App from './App.vue'; import persistedstate from './plugins/persistedstate'; const app = createApp(App); const pinia = createPinia(); app.use(pinia); app.use(router); // 如果你使用了vue-router，请确保已经导入了router app.use(persistedstate); // 使用插件进行状态持久化 app.mount('#app'); ``` 通过以上步骤，你可以在Vue 3中使用Pinia进行状态管理，并且在页面刷新时不会出现报错。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值