案例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,逻辑上是不能自洽的。

五:升华

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


相关文章
|
19天前
|
JavaScript 前端开发 Java
纯前端JS实现人脸识别眨眨眼张张嘴案例
纯前端JS实现人脸识别眨眨眼张张嘴案例
85 0
|
19天前
|
人工智能 前端开发 搜索推荐
前端技术发展趋势分析与展望
【2月更文挑战第9天】 随着移动互联网的快速发展,前端技术在不断演进,从最初的HTML、CSS到如今的React、Vue等前端框架,技术发展日新月异。本文将从移动端、跨平台、人工智能等多个角度分析前端技术的发展趋势,并展望未来的发展方向。
|
17天前
|
SQL Oracle 前端开发
Oracle效率分析,Github标星25K+超火的前端实战项目
Oracle效率分析,Github标星25K+超火的前端实战项目
|
18天前
|
前端开发 JavaScript Android开发
【Uniapp 专栏】分析 Uniapp 与其他前端框架的异同
【5月更文挑战第16天】Uniapp是一个基于Vue.js的跨平台前端框架,能将代码编译成iOS、Android、H5等多个平台应用,简化跨平台开发。相比React和Angular,Uniapp更适合移动应用,减少平台适配工作。Vue.js的组件化和灵活性在Uniapp中得到延伸,增加了移动端特性。而Flutter性能优越,但学习成本高。开发者应根据项目需求和技术栈选择合适的框架。
【Uniapp 专栏】分析 Uniapp 与其他前端框架的异同
|
18天前
|
前端开发 JavaScript 开发者
深入理解前端性能优化:从加载到渲染的全流程分析
前端性能优化是Web开发中的关键一环。本文将从加载资源、解析HTML、执行JavaScript、样式计算、布局和渲染等多个方面深入探讨前端性能优化的全流程,为开发者提供全面的技术指南和实用建议。
|
19天前
|
前端开发 JavaScript 搜索推荐
前端网页手册(2)--菜鸟教程网站分析
前端网页手册(2)--菜鸟教程网站分析
19 2
|
19天前
|
前端开发 JavaScript 网络协议
【专栏】探讨了前端性能优化中的 Performance 工具,它能帮助开发者分析页面加载速度和交互体验
【4月更文挑战第29天】本文探讨了前端性能优化中的 Performance 工具,它能帮助开发者分析页面加载速度和交互体验。通过 Performance,可检测资源加载时间、JavaScript 执行时间、重绘与回流等关键指标,找到性能瓶颈。文中列举了三个实践案例,如优化图片加载、减少 JavaScript 执行时间和避免重绘回流,展示如何利用 Performance 改进页面性能,提升用户体验。开发者应定期使用 Performance 分析并学习新优化技术,以适应Web开发的快速发展。
|
19天前
|
Rust 前端开发 vr&ar
未来前端技术发展趋势分析
在数字化时代,前端技术一直处于快速发展的状态。本文将从WebAssembly、PWA、AR/VR等方面探讨未来前端技术的发展趋势,为读者揭示前端技术的新篇章。
|
19天前
|
Web App开发 SQL 前端开发
性能工具之前端分析工Chrome Developer Tools性能标签
【2月更文挑战第22天】性能工具之前端分析工Chrome Developer Tools性能标签
39 1
性能工具之前端分析工Chrome Developer Tools性能标签
|
19天前
|
前端开发 JavaScript Apache
web前端-Echarts-5.3安装配置和案例
web前端-Echarts-5.3安装配置和案例