对web及小程序存储技术的碎片理解

存储技术基本步骤

1.先判断本地存储中有没有旧的数据
2.没有旧数据——>直接发送新请求
3.有旧数据——>旧的数据没有过期——>使用本地存储中的旧数据

存储技术目的：数据量大——>优化用户体验——>数据缓存

小程序和web本地存储技术的区别

一、代码区别

web：

localStorage.setItem(“key”,”value”)
localStorage.getItem(“key”,”value”)

小程序

wx. setStorageSync(“key”,”value”)
wx. getStorageSync(“key”)

二、是否有类型转换

web：不管存入什么类型的数据，都会调用toString()，把数据变成字符串类型再存入
小程序：不存在类型转换，存什么类型，获取的就是什么类型的数据

微信小程序例子

例子背景：一个电商类小程序，对分类页面的数据使用存储技术

onLoad: function (options) {// 获取本地存储中的数据const Cates = wx.getStorageSync("cates");// 本地存储中不存在数据if (!Cates) {this.getCates()} else {// 有旧数据，判断数据是否过期（此处设定时间为10s，1000是毫秒单位）if (Date.now() - Cates.time > 1000 * 10) {// 数据过期，重新发送请求this.getCates()} else {// 旧数据可用console.log("可以使用旧数据")this.Cates = Cates.dataconst leftMenuList = this.Cates.map(v => v.cat_name)// 构建右侧商品数据const rightContent = this.Cates[0].childrenthis.setData({leftMenuList,rightContent})}}},// 获取分类数据getCates() {request({url: "https://api-hmugo-web.itheima.net/api/public/v1/categories"}).then(res => {console.log(res)this.Cates = res.data.message// 把接口中的数据存入本地存储中wx.setStorageSync("cates", { time: Date.now(), data: this.Cates })// 构建左侧菜单数据// map()方法返回一个新数组，此处用一个临时变量将新数组存入便于操作新数组，v相对于数组内每个元素，类似于itemconst leftMenuList = this.Cates.map(v => v.cat_name)// 构建右侧商品数据const rightContent = this.Cates[0].childrenthis.setData({leftMenuList,rightContent})})}

WEB例子

例子背景：一个会员管理系统，对用户数据使用存储技术

//登录
submitForm(formName) {this.$refs[formName].validate(valid => {// console.log(valid)if (valid) {// 提交表单给后台进行验证是否正确login(this.form.username, this.form.password).then(response => {const resp = response.data console.log(resp, resp.flag, resp.data.token,resp.message)if(resp.flag) {// 验证成功, 通过token去获取用户信息getUserInfo(resp.data.token).then(response => {const respUser = response.dataif(respUser.flag){// 获取到了用户的数据console.log('userInfo', respUser.data)// 1. 保存 token ，用户信息localStorage.setItem('mxg-msm-user', JSON.stringify(respUser.data))localStorage.setItem('mxg-msm-token', resp.data.token)// 前往首页 this.$router.push('/')}else {this.$message({message: respUser.message,type: 'warning'})}})}else {// 未通过，弹出警告// alert(resp.message)this.$message({message: resp.message,type: 'warning'});}})}else{console.log('验证失败')return false}})}//退出登录
handleLogout() {logout(localStorage.getItem("mxg-msm-token")).then(response => {const resp = response.data;if (resp.flag) {// 退出成功// 清除本地数据localStorage.removeItem("mxg-msm-token");localStorage.removeItem("mxg-msm-user");// 回到登录页面this.$router.push("/login");} else {this.$message({message: resp.message,type: "warning",duration: 500 // 弹出停留时间});}});},

对web及小程序存储技术的碎片理解相关推荐

后App时代的小程序化技术？
面向企业的小程序化轻应用技术,它的竞品是谁呢?答案并非拥有小程序生态的互联网平台,而是传统原生App开发模式.网页应用开发模式.desktop软件开发模式.这正如HTML.JavaScript首先盛行 ...
Web端即时通讯技术盘点：短轮询、Comet、Websocket、SSE
摘要 Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Server- ...
WEB 实时推送技术总结
前言随着 Web 的发展,用户对于 Web 的实时推送要求也越来越高 ,比如,工业运行监控.Web 在线通讯.即时报价系统.在线游戏等,都需要将后台发生的变化主动地.实时地传送到浏览器端,而不需要用 ...
MIP、PWA、WebGL、HTTPS，来看Web生态的领先技术
作为互联网的基础载体,Web站点具有开放性.跨平台性的优势.百度作为国内在搜索领域不断深耕技术的公司,一直在Web生态的整体体验提升中扮演着重要角色.同时,在移动互联网时代,通过移动设备浏览移动网站流 ...
独家！支付宝小程序技术架构全解析
在轻应用混战的当下,小程序已经成为巨头们角逐的焦点,阿里自然也不甘落后.据阿里官方的数据,截止到今年1月28日为止,支付宝小程序应用数已经达到12万,总用户数突破5亿,日活跃用户数突破2.3亿,用户通 ...
mPaaS小程序技术架构深度解析
⚅ 点击观看<mPaaS 小程序新品发布会>回放 > > 随着小程序技术的愈发成熟,不同平台的优势和典型使用场景各有侧重,同时越来越多的开发者可以结合自身的业务特色,通过小程序 ...
自学Web前端有哪些误区？自学Web需要掌握哪些技术
今天要跟大家分享的文章是关于自学web前端有哪些误区?自学Web需要掌握哪些技术?如果是单纯出于兴趣,或者只是为了突击某一阶段或者某一项目技术壁垒,不跟就业挂钩的自学倒也是无关痛痒.但是当上岗成为自学 ...
初级Web前端工程师是什么？初级Web前端工程师的技术体系有哪些？
今天小编要跟大家分享的文章是关于初级Web前端工程师是什么?初级Web前端工程师的技术体系有哪些?本篇文章为大家整理出来了Web前端工程师初级阶段需要掌握的内容,很全面,希望大家好好阅读,看看自己掌握 ...
Web 实时推送技术如何弥补 HTTP 协议的缺陷？ | 技术头条
作者 | 浪里行舟责编 | 郭芮人工智能的现状及今后发展趋势如何? https://edu.csdn.net/topic/ai30?utm_source=csdn_bw 随着 Web 的发展,用 ...

对web及小程序存储技术的碎片理解

存储技术基本步骤

小程序和web本地存储技术的区别

微信小程序例子

WEB例子

对web及小程序存储技术的碎片理解相关推荐

最新文章

热门文章