前端性能——数据持久化

简介: 前端性能——数据持久化

如何实现数据持久化


一般情况下,借用本地存储用的比较多,或者一些插件,如vue的keep-alive,配合redux使用的persist


为什么需要数据持久化


1、减少发起请求的次数,从而提高性能。


场景:比如一个网站,数据是每天更新一次,间隔时间长,当然就可以将请求到的信息存储到本地,第二次进入获取信息从本地拿


2、用户体验方面


登陆的状态,不用每次都需要登陆

表单填写,切换页面之后数据不会消失


实现数据持久化的方法


1、localStorge

特性: 永久存储,手动清除,存储大小5M


语法:
  取值 : localStorage.getItem('key')  
  存值 : localStorage.setItem('key','value')  
  清除单个值 : localStorage.removeItem('key')
  清除所有值 :localStorage.clear( )


2、sessionStorage

特性:关闭浏览器存储清空,其余与localStorage一样


3、cookie

特性:可设置存储时间,存储大小4k,后端可以直接获取,设置,所以前端一般不操作

语法
    获取本地cookie :document.cookie( )
    设置cookie :document.cookie = 'key=value'
    向后追加,不是替换
    expires 指定Cookie过期时间;格式采用Date.toUTCString()
    domain 指定发送Cookie的域名
    path 指定Cookie的路径
    secure 指定Cookie只能在加密协议HTTPS下发送到服务器,值是一个布尔值
var day = new Date();
day.setTime(day.getTime()+(1*24*60*60*1000));
document.cookie = 'userName=fengkaicahng;expires='+day
+';domain=fengkaichang.com;path=/;secure=true'
相关文章
|
1月前
|
前端开发
Element UI 【实战】纯前端对表格数据进行增删改查(内含弹窗表单、数据校验、时间日期格式)
Element UI 【实战】纯前端对表格数据进行增删改查(内含弹窗表单、数据校验、时间日期格式)
81 6
|
2月前
|
JSON 前端开发 JavaScript
前端上传文件前校验文件数据
该文介绍了如何在Vue项目中实现批量导入Excel数据的校验。使用Element UI的`el-upload`组件上传文件,通过FileReader读取内容,结合XLSX库解析Excel为JSON。解析过程包括将二进制数据转换为workbook对象,提取worksheet并转化为JSON。之后,遍历JSON数据进行字段校验,若发现空值则记录错误。提供的Demo展示了选择Excel文件后控制台显示校验结果。技术栈包括vue 2.6.14、element ui 2.15.14和xlsx 0.17.0。建议将此类功能封装为通用组件以复用。
42 2
前端上传文件前校验文件数据
|
6天前
|
前端开发 JavaScript
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
这篇文章介绍了使用AJAX技术将前端页面中表单接收的多个参数快速便捷地传输到后端servlet的方法,并通过示例代码展示了前端JavaScript中的AJAX调用和后端servlet的接收处理。
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
|
6天前
|
前端开发
第一种方式:使用form表单将前端数据提交到servelt(将前端数据提交到servlet)
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
第一种方式:使用form表单将前端数据提交到servelt(将前端数据提交到servlet)
|
19天前
|
监控 前端开发 JavaScript
|
21天前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理
循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理
|
20天前
|
开发框架 JavaScript 前端开发
在Vue前端界面中,几种数据表格的展示处理,以及表格编辑录入处理操作。
在Vue前端界面中,几种数据表格的展示处理,以及表格编辑录入处理操作。
|
2月前
|
前端开发 JavaScript API
探索现代Web开发中的动态数据交互——前端与后端整合实战
本文探讨了现代Web开发中前端与后端整合的关键技术点,通过实际案例演示了如何利用JavaScript和Node.js实现动态数据交互,全面解析从数据请求到响应的全过程。
119 18
|
1月前
|
前端开发 JavaScript
前端模拟接口工具推荐——Apifox(mock数据)【图解教程】
前端模拟接口工具推荐——Apifox(mock数据)【图解教程】
255 1
|
2月前
|
JSON 前端开发 JavaScript
SSMP整合案例第五步 在前端页面上拿到service层调数据库里的数据后列表
SSMP整合案例第五步 在前端页面上拿到service层调数据库里的数据后列表
29 2