案例13-前端对localStorage的使用分析

简介: 前端对localStorage的使用分析

一:背景介绍

       前端在调用后端接口获取某一个人的评论次数、获赞次数、回复次数。调用之后判断后端返回过来的值。如果返回回来的值是0的话,从缓存中获取对应的值,如果从缓存中获取的评论次数为空那么其他两个的次数也为0。

83924a6f62834477a0d34d587c303cca.png

二:思路&方案

       1.明确缓存应该如何使用

       2.明确应该什么时候使用缓存

       3.明确评论和回复的逻辑关系


三:过程

什么是LocalStorage

       localstorage 在浏览器的 API 有两个:localStorage 和sessionStorage,存在于 window 对象中:localStorage 对应 window.localStorage,sessionStorage 对应 window.sessionStorage。localStorage 和 sessionStorage 的区别主要是在于其生存期。localStorage理论上来说是永久有效的,即不主动清空的话就不会消失,即使保存的数据超出了浏览器所规定的大小,也不会把旧数据清空而只会报错。sessionStorage的生存期顾名思义,类似于session,只要关闭浏览器(也包括浏览器的标签页),就会被清空。

如何使用LocalStorage

//保存数据
localStorage.setItem("key","value");
//读取数据
localStorage.getItem("key");
//删除数据
localStorage.removeItem("key")

1.存入数据

dd5483abb6cc4b0caa9650d20e711cad.png

2.读取数据

3b2c95ec291b4da1b9d90391df841b7d.png

3.删除数据

ac1d54fbd23b4b38960a0f295be16985.png

何时使用LocalStorage

1、登录完成后token的存储

2、用户部分信息的存储,比如昵称、头像、简介

3、一些项目通用参数的存储,例如某个id、某个参数params

4、项目状态管理的持久化,例如vuex的持久化、redux的持久化

5、项目整体的切换状态存储,例如主题颜色、icon风格、语言标识

使用LocalStorage注意事项

1.命名问题

       现在我们的线上就有这个问题,在同源的域名下,同源的两个项目的localStorage是互通的。如果我们存储信息时太过于简单的话,可能会造成互相污染的现象。比如存储用户信息的时候,使用user来作为key存储,但是两个环境都使用了这个user就会产生污染问题

2.时效性问题

       localStorage除非手动进行清除,否则的话将会一直存在。如果有一些时效性的键值,比如说token,可能会过期,那么我们使用的时候就一定要设置过期时间。

3.隐蔽性问题

       我们所有存在localStorage里面的数据的,都是在Application里面可以直接看到的,上线之后,用户也是可以直接看到的,但是有的数据我们并不想让用户看到,这时候就要考虑隐蔽性的问题了。

四:总结

       1.不应该把经常变动的数据放入的缓存中。我们完全可以之后从后端获取之后直接返回给前端,前端直接渲染就可以了。不需要做任何的逻辑操作。

       2.对于评论、获赞、回复之间的逻辑。评论和回复之间是没有耦合关系的。我们不评论自己的内容也完全可以回复别人的评论。所以说不能因为评论是0就把回复也设置为0,逻辑上是不能自洽的。

五:升华

       使用任何一个知识点要明确概念,明确边界。什么时候需要使用什么时候不能使用。不是这种方式能够实现我们的功能我们就用这一种方案。可以出多种方面明确每一种方案的优势利弊。这样我们才能避免风险的出现。对于业务的逻辑我们可以把我们想的和现实生活进行一个映射,看看在我们实际应用的时候会不会发生一些奇异的地方。


目录
打赏
0
0
0
0
6
分享
相关文章
2025年前端局势分析,我该不该转行?
2024年,前端领域经历了快速变化,AIGC的兴起和市场HC减少使得前端工程师面临挑战。尽管AI工具如通义灵码和Cursor能高效生成代码,但AI无法完全取代前端工程师,因其缺乏逻辑、沟通和创新能力。前端工作不仅限于编码,还包括需求分析、代码评审等。未来,前端不会“死亡”,而是持续演变。面对大环境的压力,提升综合能力、拥抱变化、持续学习和保持身心健康是关键。转型方向包括升管理、做架构师或转讲师等。稳住2025年,需适应变化、不断学习并探索更多可能性。
303 16
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
109 1
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
137 1
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
前端一键回到顶部案例
本文介绍了如何实现网页中的一键回到顶部功能,包括两种方法:第一种是通过HTML中的锚点跳转实现快速回到顶部;第二种是使用JavaScript的`scrollTo`方法结合`requestAnimationFrame`实现滚动动画效果,让页面滚动更加平滑自然。
135 1
前端一键回到顶部案例
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
本文档详细介绍了HTML表单的多种元素及其用法,包括下拉菜单(`<select>` 和 `<option>`)、文本域(`<textarea>`)、标签解释(`<label>`)、各类按钮(`<button>`)及表单重置功能、无语义布局标签(`<div>` 和 `<span>`)以及字符实体的应用。此外,还提供了一个完整的注册信息表单案例,涵盖个人信息、教育经历和工作经历等部分,展示了如何综合运用上述元素构建实用的表单。
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
本文介绍了使用Kaptcha插件在SpringBoot项目中实现验证码的生成和验证,包括后端生成验证码、前端展示以及通过session进行验证码校验的完整前后端代码和配置过程。
620 0
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
socket.io即时通信前端配合Node案例
本文介绍了如何使用socket.io库在Node.js环境下实现一个简单的即时通信前端配合案例,包括了服务端和客户端的代码实现,以及如何通过socket.io进行事件的发送和监听来实现实时通信。
90 2
前端基础(十)_Dom自定义属性(带案例)
本文介绍了DOM自定义属性的概念和使用方法,并通过案例展示了如何使用自定义属性来控制多个列表项点击变色的独立状态。
77 0
前端基础(十)_Dom自定义属性(带案例)
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
211 0

热门文章

最新文章

  • 1
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    15
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    9
  • 3
    从前端视角聊聊通义灵码使用经验,如何更好地提升研发效率
    142
  • 4
    详解智能编码在前端研发的创新应用
    10
  • 5
    巧用通义灵码,提升前端研发效率
    20
  • 6
    智能编码在前端研发的创新应用
    12
  • 7
    VSCode AI提效工具,通义灵码前端开发体验
    19
  • 8
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    17
  • 9
    课程预告|前端开发者如何用好通义灵码,这份实战指南请查收
    82
  • 10
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    3
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等