[小程序开发] 本地存储API封装

news/2024/7/20 2:35:02 标签: 前端, 小程序, html, scss, javascript, 微信小程序
htmledit_views">

一、同步存储API(wx.setStorageSync,wx.getStorageSync,wx.removeStorageSync,wx.clearStorageSync)

        1、存储

javascript">// 存储本地数据封装
// key:本地缓存中指定的key,value:需要缓存的数据
export const setStorageSync=(key, value) => {
	try{
		wx.setStorageSync(key, value)
	}catch(error){
		console.error('存储指定 ${key} 数据发生异常',error)
	}
}

        2、读取

javascript">// 从本地读取指定key的数据
export const getStorage=(key) => {
	try {
		const value= wx.getStorageSync(key)
		if(value){
			return value
		}
	} catch (error) {
		console.error('读取指定 ${key} 数据发生异常',error)
	}
}

        3、移除

javascript">// 从本地移除指定key的数据
export const removeStorage=(key)=>{
	try {
		wx.removeStorageSync(key)
	} catch (error) {
		console.error('移除指定 ${key} 数据发生异常',error)
	}
}

        4、清空

javascript">// 从本地移除、清空全部的数据
export const clearStorage=()=>{
	try {
		wx.clearStorageSync()
	} catch (error) {
		console.error('移除、清空数据发生异常',error)
}

        5、在app.js文件中调用

javascript">import{setStorage,getStorage,removeStorage,clearStorage} from './utils/storage'
App({
    async onShow(){

	// 调用封装的setStorage,同步存储数据
	setStorage('name','tom')

	// 调用封装的getStorage,同步读取数据
	const name =getStorage('name')
	console.log(name)

	// 调用封装的renmoveStorage,同步移除数据
	removeStorage('name')

	// 调用封装的clearStorage,同步移除全部数据
	clearStorage()

	}

})

二、异步存储API(wx.setStorage,wx.getStorage,wx.removeStorage,wx.clearStorage)

        1、存储

javascript">// 将数据存储的本地
// key:本地缓存中指定的key,data:需要缓存的数据
export const asyncSetStorage = (key,data) => {
	return new Promise((resolve)=>{
		wx.setStorage({
			key,
			data,
			complete(res){
				resolve(res)
			}
		})
	})
}

        2、读取

javascript">// 从本地读取指定key的数据
export const asyncGetStorage=(key)=>{
	return new Promise((resolve)=>{
		wx.getStorage({
			key,
			complete(res){
				resolve(res)
			}
		})
	})
}

        3、移除

javascript">// 从本地移除指定key的数据
export const asyncRemoveStorage=(key)=>{
	return new Promise((resolve)=>{
		wx.asyncRemoveStorage({
			key,
			complete(res){
				resolve(res)
			}
		})
	})
}

        4、清空 

javascript">// 从本地清除、移除所有数据
export const asyncClearStorage=()=>{
	return new Promise((resolve)=>{
		wx.clearStorage({
			complete(res){
				resolve(res)
			}
		})
	})
}

        5、在app.js文件中调用

javascript">import{asyncSetStorage,asyncGetStorage,asyncRemoveStorage,asyncClearStorage} from './utils/storage'
App({
    // 调用封装的setStorage,异步存储数据
	asyncSetStorage('name','tom').then((res)=>{
	console.log(res)
	})

	// 调用封装的getStorage,异步读取数据
	asyncGetStorage('name').then((res)=>{
	console.log(res)
	})

	// 调用封装的renmoveStorage,异步移除数据
	asyncRemoveStorage('name').then((res)=>{
	console.log(res)
	})

	// 调用封装的clearStorage,异步移除全部数据
	asyncClearStorage().then((res)=>{
		console.log(res)
	})

})


http://www.niftyadmin.cn/n/5454311.html

相关文章

AI浪潮席卷游戏业:未来5~10年,游戏或将由AI生成

一年前,因为AI失业的第一批人,在游戏行业出现了。游戏原画、翻译等外包团队开始遭遇砍单,AI绘画工具的发展速度和水平已经几乎可以媲美科班出身、初级经验的人类画师。 一年时间过去,在游戏制作的毛细血管中,越来越多…

缤纷浏览器 —— 一键换肤,个性随心换(H5实现浏览器换肤效果)

🌟 前言 欢迎来到我的技术小宇宙!🌌 这里不仅是我记录技术点滴的后花园,也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛,这里总有一些内容能触动你的好奇心。🔍 &#x…

springboot项目中如何实现邮件告警功能(监控平台服务模拟)

介绍 模拟服务器故障&#xff0c;然后实现邮件告警 一、首先配置邮件的maven依赖 代码如下&#xff1a; <!--邮件告警--><!-- Spring Boot的邮件发送依赖 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spri…

阿里云服务器租用价格表-2024最新(附明细报价)

2024年阿里云服务器优惠价格表&#xff0c;一张表整理阿里云服务器最新报价&#xff0c;阿里云服务器网aliyunfuwuqi.com整理云服务器ECS和轻量应用服务器详细CPU内存、公网带宽和系统盘详细配置报价单&#xff0c;大家也可以直接移步到阿里云CLUB中心查看 aliyun.club 当前最新…

[项目管理-38]:任务分解技术和方法?

目录 一、任务分解的方法 二、任务分解的步骤 三、如何自定向下分解项目任务 四、如何自顶向下分解软件需求&#xff1f; 五、如何自顶向下分解软件设计&#xff1f; 一、任务分解的方法 任务分解技术和方法是一种将复杂的任务或项目分解为更小、更具体的子任务的过程&am…

快速上手Spring Cloud 十:Spring Cloud与微前端

快速上手Spring Cloud 一&#xff1a;Spring Cloud 简介 快速上手Spring Cloud 二&#xff1a;核心组件解析 快速上手Spring Cloud 三&#xff1a;API网关深入探索与实战应用 快速上手Spring Cloud 四&#xff1a;微服务治理与安全 快速上手Spring Cloud 五&#xff1a;Spring …

Django 自定义中间件(IP限制频率、用户权限)

【一】用户权限 &#xff08;1&#xff09;要求 不同的用户&#xff0c;有不同的操作权限比如 超级管理员&#xff0c;拥有所有权限管理员可以增加、查询、修改普通用户只能查询 &#xff08;2&#xff09;逻辑梳理 理论来说&#xff0c;这个权限需要保存在数据库中 但是这…