更新LocalStorage的方法技巧

最新推荐文章于 2023-09-25 18:23:19 发布
最新推荐文章于 2023-09-25 18:23:19 发布
阅读量5.9k 收藏 2
点赞数
分类专栏： phpcms LocalStorage JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29131151/article/details/88649330
版权
phpcms 同时被 3 个专栏收录
6 篇文章 0 订阅
订阅专栏
LocalStorage
1 篇文章 0 订阅
订阅专栏
JS
1 篇文章 0 订阅
订阅专栏

目前项目中需要使用ajax获取后端数据后展示出来，由于返回的数据量较大，考虑前端获取数据后使用LocalStorage进行浏览器本地存储数据，这样当客户再次打开页面的时候先检测本地LocalStorage中是否存在数据，如数据存在便直接从本地读取而不再发起Ajax请求后端，可以提高页面加载速度并减轻服务器带宽压力。

想法很美好，花了十几分钟也就搞好了，但是问题来了，由于LocalStorage是永久本地化存储，用户第一次打开页面的时候从后端请求到数据并存储起来，以后再次打开便不在从后端请求数据，如果后端更新了数据，如追加/删除了数据，用户就无法看到最新的数据，想了一会，准备使用类似版本号的方法来解决。

目前改造如下：第一次请求数据的时候，数据中包含个版本号（后端mysql查询的时候使用最最近一次更新数据时的UNIX时间戳来当版本号），前端获得数据的时候将版本号新建LocalStorage KEY和VALUE来保存（“ver” “1552908845”） ,当用户以后再次打开页面的时候先检测LocalStorage中是否存在ver，如存在则先请求一次后端获取最新更新的时间戳和ver储存的进行比对，如不一致则重新请求后端数据覆盖当前数据，如一致则直接使用LocalStorage中的数据

如此改造后多了一次用于获得版本号的ajax请求，只不由于只请求个版本号，数据量非常小可以忽略不记。这样算是解决了吧。

PHP API部分代码示例
PHP API部分

前端请求部分代码示例
前端判断请求部分

浏览器Local Storage的存储情况
浏览器中Local Storage存储情况

本文由 www.UE4.net 原创提供 黄韬 QQ:95606117，转载请注明

宝塔服务器面板，一键全能部署及管理，送你3188元礼包，点我领取

艺术流氓
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript中localStorage对象存储方式实例分析
10-20
主要介绍了JavaScript中localStorage对象存储方式,结合实例形式分析了localStorage对象存储数据的原理及操作技巧,需要的朋友可以参考下
Vue中如何进行本地存储（LocalStorage）
stormjun的博客
09-21 7585
本地存储（LocalStorage）是浏览器提供的一种机制，允许Web应用程序在用户的浏览器中存储数据。这些数据以键值对（key-value pairs）的形式存储，并且可以在浏览器会话之间保持持久性。本地存储是基于域名的，这意味着数据将与特定域名相关联。存储在LocalStorage中的数据在浏览器关闭后仍然保留，直到被明确删除。浏览器为每个域名提供了一定的LocalStorage存储容量，通常为5-10MB。超出容量限制时，需要谨慎管理存储数据。
vue 实时更新本地存储localStorage
qq_40425629的博客
05-19 1312
main.js var setItem = localStorage.setItem; localStorage.setItem = function(key,newValue){ // 要监听的key为Item if(key === "Item"){ var setItemEvent = new Event("setItemEvent"); setItemEvent.newValue = newValue; window.dispatchEvent(setItemEvent); } }
vue监听缓存数据（localStorage） 中值的更新
热门推荐
xy_xxyy的博客
07-05 1万+
vue监听缓存数据（localStorage） 中值的更新
vuex与localStorage实现数据和页面更新
qq_51226378的博客
01-20 2748
vuex实现用户信息更改，实时更新头部组件右上角的信息
localstorage本地存储和动态刷新
qq_40994735的博客
08-20 4224
localstorage本地存储和动态刷新1.实现动态刷新思路2 localstorage本地存储3 fecth的使用4 案例代码 1.实现动态刷新思路 - 通过比较 "滚动条高度"：parseInt(document.documentElement.scrollTop) "浏览器实际高度"：document.documentElement.clientHeight "实际内容高度"：document.docu
【转】基于localStorage的资源离线和更新技术
12-05 157
ServiceWorker的资源离线与更新 ServiceWorker是替代Application Cache的机制，目前为止其兼容性很差。 localStorage资源离线缓存与更新 基本思路：将JavaScript、CSS资源文件甚至是接口返回的数据资源缓存到浏览器的localStorage中，下次打开页面时不进行JavaScript、CSS资源的请求，而是直接通过loc...
本地存储localStorage
zhangge3663的博客
09-01 345
我们可以通过全局属性localStorage访问本地存储功能，该属性返回一个Storage对象，Storage对象用来保存键/值形式的字符串对象 Storage对象有如下属性和方法: Storage对象可以用来保存键/值对，之中键和值都必须是字符串键必须是唯一的，这意味着如果我们用Storage对象中的setItem方法设置相同的键名的键/值对，后面一个会覆盖掉前面一个，事实上就是后面一个更新了已经存在的键的值。 localStorage案例1(localStorage.html): <
全浏览器兼容localStorage组件
08-10
3. `README.md`：介绍组件的使用方法、注意事项和更新日志。 4. `LICENSE`：组件的开源许可证，规定了使用和分发的规则。 通过这个组件，开发者可以放心地在各种浏览器环境下使用`localStorage`，不必担心兼容性...
JavaScript优化以及前段开发小技巧
12-02
例如，当检测到第三方应用不支持localStorage时，可以使用惰性模式立即或首次使用时重定义获取和设置方法，以减少不必要的检查。 3. 使用缓存： 对于频繁访问的数据，使用变量缓存结果可避免重复计算。例如，计算...
HTML5 LocalStorage 本地存储刷新值还在
09-27
html5的两种存储技术的最大区别就是生命周期，接下来通过本文给大家分享HTML5 LocalStorage 本地存储刷新值还在问题以及使用方法小结，需要的的朋友参考下本文吧
HTML5 localStorage 页面数据同步demo
05-11
HTML5 localStorage 页面数据同步demo。 演示方法，同时打开localstorage1.html, localstorage2.html, localstorage3.html，需用用http方式打开，修改任意一个后，点save或clear。 其他两个页面会同步更新。
HTML 5一些基本学习技巧和方法
03-12
5. **Web 存储**：`localStorage` 和 `sessionStorage` 提供了本地存储数据的能力，允许网站在用户关闭浏览器后仍能保留数据。 6. **Canvas 和 SVG**：这两个图形绘制技术提供了动态图形和矢量图的支持，使得开发者...
22个HTML5 技巧
11-17
13. **Web Storage**：`localStorage`和`sessionStorage`提供了比Cookie更大的容量，用于存储用户数据，且不会随HTTP请求发送。 14. **Geolocation**：通过`navigator.geolocation`接口，网页可以获取用户的地理...
[JavaScript]Vue.js实现localStorage动态更新
最新发布
元晖的博客
09-25 349
下面这段代码，定义了一个响应式的localStorage的读和写。
客户端存储cookie + localStorage + sessionStorage 和 服务器存储 cookie + session
weixin_47075145的博客
08-23 1715
设置cookie:ctx.cookies.set(key,value)获取cookie: ctx.cookie.get(key)1.后端的cookie的存储位置：后端设置的cookie会存储在客户端浏览器里面，前端设置的也在客户端浏览器里面，且所在的位置相同。
HarmonyOS学习路之方舟开发框架—学习ArkTS语言（状态管理 六）
爱吃土豆丝的打工人的博客
09-12 1379
AppStorage是在应用启动的时候会被创建的单例。它的目的是为了提供应用状态数据的中心存储，这些状态数据在应用级别都是可访问的。AppStorage将在应用运行过程保留其属性。属性通过唯一的键字符串值访问。AppStorage可以和UI组件同步，且可以在应用业务逻辑中被访问。AppStorage中的属性可以被双向同步，数据可以是存在于本地或远程设备上，并具有不同的功能，比如数据持久化。
HTML5特性 > 本地储存>localStorage简要说明
appteam_vlctech的专栏
09-24 1537
1.localStorage是什么 localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。 2.localStorage有哪些优点 1. 存储空间 存储空间 更大：IE8下每个独立的存储空间为10M，其他浏览器实现略有不同，但都比Cookie要大很多。 2. 服务器 存储内容不会发送到服务器：当设置了Cookie后，Cooki
利用localstorage解决vuex页面刷新数据丢失问题
qq_23260455的博客
09-07 2990
一、场景描述： 根据用户的登录状态来实现不同的路由跳转，这个功能之前有写到用三目运算来实现。那么这个用户状态又怎么做呢，怎么在登录期间刷新页面而不丢失用户信息？首先想到Vuex作为全局的共享数据。但是在页面刷新的时候vuex里的数据会重新初始化，导致数据丢失。因为vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据就会被重新赋值。 二、解决思路： 将用户信息更新至vuex中并保存到local storage，这样页面刷新或者其他页面都可以读取到用户信息。 具
如何使用localstorage
07-29
使用localStorage可以通过以下几种方式进行设置和取值： 1. 设置值（存值）： - 使用\[\]方法：localStorage\["name"\] = "mickle"; - 使用.方法：localStorage.name = "mickle"; - 使用setItem方法：localStorage.setItem('name', 'mickle'); 2. 取值： - 使用getItem方法：localStorage.getItem("name"); - 使用\[\]方法：localStorage\["name"\]; - 使用.方法：localStorage.name; 以上是使用localStorage的常见方法和技巧。通过键值对的方式，可以方便地存储和获取数据。 #### 引用[.reference_title] - *1* *2* [localStorage中8个用法](https://blog.csdn.net/qq_31318983/article/details/100741643)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [localstorage使用](https://blog.csdn.net/m0_50884068/article/details/120265961)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值