前端数据持久化

简介: 前端数据持久化

如何实现数据持久化



一般情况下,借用本地存储用的比较多,或者一些插件,如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'


相关文章
|
5月前
|
前端开发
【前端统计图】hcharts实现堆叠柱形图(与后台数据交互)
【前端统计图】hcharts实现堆叠柱形图(与后台数据交互)
30 0
|
4月前
|
前端开发 JavaScript API
前端 excelex 包可将数据保存为 xls、xlsx、csv、txt 文件(支持单元格样式、合并单元格等)
前端 excelex 包可将数据保存为 xls、xlsx、csv、txt 文件(支持单元格样式、合并单元格等)
64 1
|
6月前
|
监控 前端开发 Cloud Native
解决WebSocket通信:前端拿不到最后一条数据的问题
解决WebSocket通信:前端拿不到最后一条数据的问题
133 0
|
3月前
|
前端开发 JavaScript 关系型数据库
若依框架------后台路由数据是如何转换为前端路由信息的
若依框架------后台路由数据是如何转换为前端路由信息的
108 0
|
7天前
|
存储 缓存 前端开发
前端如何利用indexDB进行数据优化
使用IndexedDB作为浏览器内置的客户端数据库,用于存储大量数据和实现离线支持。它能缓存常用数据,减少服务器请求,提高用户体验。IndexedDB支持数据索引、复杂查询及版本管理,允许离线操作并同步到服务器。但需熟悉其异步API,可借助Dexie.js、localForage等库简化使用。
|
2月前
|
前端开发 Java API
WebSocket vs SSE: 实时数据推送到前端的选择与实现(详细)
WebSocket vs SSE: 实时数据推送到前端的选择与实现(详细)
255 0
|
2月前
|
JavaScript 前端开发 开发者
深入理解前端框架Vue.js的数据响应式原理
本文将深入探讨Vue.js前端框架中的数据响应式原理,包括双向绑定、依赖追踪和虚拟DOM等核心概念。通过详细解析Vue.js内部实现机制,读者能够更好地理解其工作原理,并在实际开发中更灵活地运用。
|
3月前
|
前端开发 JavaScript
工作这么久了,还不懂如何使用纯前端实现分页吗?-假如后端一股脑返回给你所有数据,让你自个实现分页该怎么办
工作这么久了,还不懂如何使用纯前端实现分页吗?-假如后端一股脑返回给你所有数据,让你自个实现分页该怎么办
72 0
|
4月前
|
JSON 前端开发 Java
JAVA后端向前端传递Long类型数据,导致数据不一致
JAVA后端向前端传递Long类型数据,导致数据不一致
93 0
|
4月前
|
前端开发 JavaScript
前端 dlhelper 下载辅助库(支持链接后台下载、代理下载、Blob 数据下载,针对代理下载灵活使用)
前端 dlhelper 下载辅助库(支持链接后台下载、代理下载、Blob 数据下载,针对代理下载灵活使用)
34 1