前端性能——数据持久化

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

如何实现数据持久化


一般情况下,借用本地存储用的比较多,或者一些插件,如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'
相关文章
|
7月前
|
前端开发
【前端统计图】hcharts实现堆叠柱形图(与后台数据交互)
【前端统计图】hcharts实现堆叠柱形图(与后台数据交互)
34 0
|
21天前
|
前端开发 JavaScript API
前端 excelex 包可将数据保存为 xls、xlsx、csv、txt 文件(支持单元格样式、合并单元格等)
前端 excelex 包可将数据保存为 xls、xlsx、csv、txt 文件(支持单元格样式、合并单元格等)
72 1
|
21天前
|
前端开发 JavaScript 关系型数据库
若依框架------后台路由数据是如何转换为前端路由信息的
若依框架------后台路由数据是如何转换为前端路由信息的
146 0
|
21天前
|
前端开发 关系型数据库 MySQL
SpringBoot-----从前端更新数据到MySql数据库
SpringBoot-----从前端更新数据到MySql数据库
24 1
|
21天前
|
JSON JavaScript Java
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
40 0
|
21天前
|
存储 缓存 前端开发
前端如何利用indexDB进行数据优化
使用IndexedDB作为浏览器内置的客户端数据库,用于存储大量数据和实现离线支持。它能缓存常用数据,减少服务器请求,提高用户体验。IndexedDB支持数据索引、复杂查询及版本管理,允许离线操作并同步到服务器。但需熟悉其异步API,可借助Dexie.js、localForage等库简化使用。
|
21天前
|
前端开发 API 数据库
Django(五):如何在Django中通过API提供数据库数据给前端
Django(五):如何在Django中通过API提供数据库数据给前端
|
21天前
|
前端开发 Java API
WebSocket vs SSE: 实时数据推送到前端的选择与实现(详细)
WebSocket vs SSE: 实时数据推送到前端的选择与实现(详细)
503 0
|
21天前
|
JavaScript 前端开发 开发者
深入理解前端框架Vue.js的数据响应式原理
本文将深入探讨Vue.js前端框架中的数据响应式原理,包括双向绑定、依赖追踪和虚拟DOM等核心概念。通过详细解析Vue.js内部实现机制,读者能够更好地理解其工作原理,并在实际开发中更灵活地运用。
|
21天前
|
前端开发 JavaScript
工作这么久了,还不懂如何使用纯前端实现分页吗?-假如后端一股脑返回给你所有数据,让你自个实现分页该怎么办
工作这么久了,还不懂如何使用纯前端实现分页吗?-假如后端一股脑返回给你所有数据,让你自个实现分页该怎么办
83 0