前端性能——数据持久化

如何实现数据持久化

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/510985.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

云原生微服务的下一站,微服务引擎 MSE 升级

简介:管好微服务,成为云原生时代的新难题。 管好微服务,成为云原生时代的新难题。 从建好微服务到管好微服务,差的虽是一个字,连接起两边的却需要大量的微服务落地经验。因为软件架构的核心挑战是解决业务快速增长带…

火爆全网的“数字人”,到底是个啥?

作者 | 小枣君来源 | 鲜枣课堂庄子他老人家说过:“人生,就是一场游戏。”对于这场游戏,有些人玩得很嗨,到了结尾不肯退场,总希望无限期玩下去。例如秦始皇,总想着灵丹妙药、长生不死。还有些人呢&#xff0…

阿里云RemoteShuffleService新功能:AQE和流控

简介:阿里云EMR自2020年推出Remote Shuffle Service(RSS)以来,帮助了诸多客户解决Spark作业的性能、稳定性问题,并使得存算分离架构得以实施。为了更方便大家使用和扩展,RSS在2022年初开源,欢迎各路开发者共建。本文将…

react如何在父组件中调用子组件事件

父组件是如何使用子组件的事件的,下边数值累加的例子 类组件 将子组件的this传到父组件,给父组件添加一个属性,值为this,之后就可以通过父组件的属性调用子组件的事件了 import React,{Component} from react;// 这是子组件 clas…

OpenSergo 正式开源,多家厂商共建微服务治理规范和实现

简介 OpenSergo,Open 是开放的意思,Sergo 则是取了服务治理两个英文单词 Service Governance 的前部分字母 Ser 和 Go,合起来即是一个开放的服务治理项目。 该项目由阿里云、bilibili、字节跳动,以及 Spring Cloud Alibaba、Nacos…

Linux中常见的网络端口号

在使用计算机或智能手机时,我们使用各种硬件端口,如用于音频、HDMI、Type-c 等的 3.5mm 端口,其用于与硬件外围设备通信。同样,网络端口可以让我们在一台计算机上访问各种网络服务来达到通信的目的。因此,端口被认为是…

如何在云原生混部场景下利用资源配额高效分配集群资源?

简介:由于混部是一个复杂的技术及运维体系,包括 K8s 调度、OS 隔离、可观测性等等各种技术,之前的一篇文章《历经 7 年双 11 实战,阿里巴巴是如何定义云原生混部调度优先级及服务质量的?》,主要聚焦在调度优…

前端面试题网址合辑

八个笔试&面试仓库 1.Front-end Developer Interview Questions网址:https://h5bp.org/Front-end-Developer-Interview-Questions/ 2.CS-Interview-knowledge-Map 网址:https://github.com/InterviewMap/CS-Interview-Knowledge-Map 3.Daily-Questio…

稳定性与高可用保障的工作思路

简介:稳定性与高可用性是老生常谈的两个词。凭借经验和感受我们知道,提高系统的这两项指标,系统会更加健康,产品也会有更好的用户体验。但是如果要给稳定性和高可用性下一个定义该如何表述?稳定性和高可用性这二者又有…

招商银行 KubeVela 离线部署实践

简介:本文将以 KubeVela v1.2.5 版本为例,介绍招商银行 KubeVela 的离线部署实践,来帮助其他用户在离线环境中更便捷的完成 KubeVela 的部署。 招商银行云平台开发团队自 2021 年开始接触 KubeVela,并探索 KubeVela 在招商银行云…

腾讯云数据库自研内核全新升级 新架构比原先性能提升20%

9月16日,腾讯云数据库自研内核TXSQL完成了全新升级。搭载了新一代内核的云数据库在性能上较之前提升超过20%,延迟降低80%。目前,新一代内核TXSQL已应用于腾讯云数据库MySQL、分布式数据库TDSQL、云原生数据库TDSQL-C等多款主流云数据库产品中…

系统性能分析从入门到进阶

简介:本文以系统为中心, 结合日常工作和用例, 由浅入深地介绍了性能分析的一些方法和体会, 希望对想了解系统性能分析的同学有所帮助。 作者 | 勿非 本文以系统为中心, 结合日常工作和用例, 由浅入深地介绍了性能分析的一些方法和体会, 希望对想了解系统性能分析的…

百度地图实用案例

1、创建一个js文件 export function BMPGL(ak) {return new Promise(function (resolve, reject) {window.init function () {// eslint-disable-next-lineresolve(BMapGL)}const script document.createElement(script)script.type text/javascriptscript.src http://api…

宜搭小技巧|第一时间看到审批进度?消息通知来帮你

简介:「消息通知」自动发送,再也不用担心错过流程审批进度! 今天,宜小搭要申请出差,为了第一时间获取审批进度,他频繁刷新审批页面,这样既麻烦同时也浪费了大量时间,影响其他工作。…

一看即会:Serverless 应用开发的 7 个实战小技巧

简介:干货满满,马住收藏! Serverless 应用开发的 7 个经验心得 作者说:Serverless 架构下的应用开发,与传统架构的应用开发还是有比较大的区别点的,例如天然分布式架构会让很多框架丧失一定的"便利性…

vue路由权限

1,配置每个页面的meta信息 meta:{grade:[1,2,3], //权限等级title:页面标题,icon:图标,show:是否展示导航 } 2,将无权限的页面路由直接配置到routes let routes [{path: /login,name: login,component: () > import(../components/login/login.vu…

如何使用 Serverless Devs 部署静态网站到函数计算

简介:手把手教你:如何使用 Serverless Devs 部署静态网站到函数计算。 前言 公司经常有一些网站需要发布上线,对比了几款不同的产品后,决定使用阿里云的函数计算(FC)来托管构建出来的静态网站。 FC 弹性实例自带的50…

一个好的科技公司logo长这样

简介:一个好的科技logo能体现出行业独有的专业性和技术优势,让你的公司科技感加满! 近年来,越来越多的初创公司崭露头角,其中科技互联网公司的比重非常高。小云也收到很多朋友的留言,询问科技类公司应该怎…

滚动页面触发相应位置动画 ---react

需要实现的效果: (滚动到内容区域触发) 第一段内容移动效果 第二段内容淡入 第三段内容缩放实现思路 滚动过的距离当前窗口的高度>元素到顶部窗口的距离 >则触发动画整体代码 import React,{useRef,useEffect,useState} from react;…

系列解读 SMC-R (二):融合 TCP 与 RDMA 的 SMC-R 通信 | 龙蜥技术

简介:本篇以 first contact (通信两端建立首个连接) 场景为例,介绍 SMC-R 通信流程。 文/龙蜥社区高性能网络SIG 一、引言 通过上一篇文章 《系列解读SMC-R:透明无感提升云上 TCP 应用网络性能(一)》我们了解到&…