封装 localStorage 缓存，兼容网页，微信小程序，uni-app

封装的缓存功能，兼容网页，微信小程序，uni-app 使用，支持设置缓存，获取缓存，移除缓存，清空缓存，设置缓存时间，分组缓存设置。

把最下面的 Str4.js 代码拷贝到项目内可以直接使用，调用方式见下面的代码调用示例

封装的Js 文件在 uni-app 目录结构图：

uni-app 调用示例

<template><view class="content"><view>{{testKey1}}</view><view>{{testKey2}}</view><view>{{testKey3}}</view></view>
</template><script>import Str4 from '@/common/js/Str4.js';export default {data() {return {testKey1: 'AAA',testKey2: 'VVV',testKey3: '',}},mounted: function() {// 保存Str4.localStorage.set('testKey1','1111111111');Str4.localStorage.set('testKey2','222222222');Str4.localStorage.set('testKey3','333333333');//读取this.testKey1 = Str4.localStorage.get('testKey1');this.testKey2 = Str4.localStorage.get('testKey2');this.testKey3 = Str4.localStorage.get('testKey3');}}
</script><style>.content {}
</style>

h5调用示例

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script type="text/javascript" src="./js/Str4.js"></script></head><body><div id="testKey1"></div><div id="testKey2"></div><div id="testKey3"></div><script> // 1、保存Str.localStorage.set('testKey1', '我已经保存111111', 3600, 'group');Str.localStorage.set('testKey2', '我已经保存222222', 0, 'group');Str.localStorage.set('testKey3', '我已经保存333333', 0.01);// 2、读取var key1 = Str.localStorage.get('testKey1','group');document.getElementById('testKey1').innerText = key1;var key2 = Str.localStorage.get('testKey2','group');document.getElementById('testKey2').innerText = key2;var key3 = Str.localStorage.get('testKey3');document.getElementById('testKey3').innerText = key3;//Str.localStorage.remove('group');/* // 3、修改Str.localStorage.set('testKey2','我被修改了222');var key2 =  Str.localStorage.get('testKey2');document.getElementById('testKey2').innerText = key2;// 4、删除指定键Str.localStorage.remove('testKey3');var key3 =  Str.localStorage.get('testKey3');document.getElementById('testKey3').innerText = key3; */// 5、清空//Str.localStorage.clear();</script></body>
</html>

Str4.js 代码封装：

var Str = {};
/** 判断字符串是否为空*/
Str.isNull = function(str) {if (str === undefined) return true;if (str === 'undefined') return true;if (str === null) return true;if (typeof str == 'string') str = str.replace(/^\s*|\s*$/g, "");if (str === '') return true;return false;
};
/** 判断字符串是否为非空*/
Str.isNotNull = function(str) {return !this.isNull(str);
};
/*** localStorage操作*/
Str.localStorage = {/*** 保存* @param {Object} key 键名* @param {Object} value 键值* @param int second 缓存时间（单位：秒)* @param string ctag 组名*/set: function(key, value, second = null, ctag = null) {if (Str.isNull(second) || second == 0) second = 86400 * 365 * 10;var data = {value: value,expire: parseInt((new Date()).getTime() / 1000) + second};if (Str.isNotNull(ctag)) {// 如果存在组主键名，则保存在组主键下let baseVal = this.get(ctag) || {};baseVal[key] = data;data = {value: baseVal,expire: parseInt(new Date().getTime() / 1000) + 86400 * 365 * 10};key = ctag;}if (localStorage != undefined) {localStorage.setItem(key, JSON.stringify(data));} else if (uni.setStorageSync != undefined) {uni.setStorageSync(key, JSON.stringify(data));} else if (wx.setStorageSync != undefined) {wx.setStorageSync(key, JSON.stringify(data));}},/*** 读取* @param {Object} key 键名*/get: function(key, ctag) {let _key = key;if (Str.isNotNull(ctag)) {key = ctag; // 如果存在组主键名，则读取组主键内容}var data = null;if (localStorage != undefined) {data = localStorage.getItem(key);} else if (uni.getStorageSync != undefined) {data = uni.getStorageSync(key);} else if (wx.getStorageSync != undefined) {data = wx.getStorageSync(key);}if (Str.isNotNull(data)) {if (typeof data == 'string') data = JSON.parse(data);if (Str.isNotNull(ctag)) {if (data.expire != null && data.expire * 1000 < new Date().getTime()) {this.remove(ctag);return null;}data = data.value[_key]; // 重新赋值if (Str.isNull(data)) return null;}if (data.expire != null && data.expire * 1000 < new Date().getTime()) {this.remove(_key, ctag);return null;}return data.value;}return null;},/*** 删除指定键* @param key       键名* @param ctag      组主键名*/remove: function(key, ctag) {if (Str.isNotNull(ctag)) {if (Str.isNull(key)) {key = ctag;} else {let baseVal = this.get(ctag) || {};delete baseVal[key];if (JSON.stringify(baseVal) == '{}') key = ctag;else this.set(ctag, baseVal, null);}}if (localStorage != undefined) {localStorage.removeItem(key);} else if (uni.removeStorageSync != undefined) {uni.removeStorageSync(key);} else if (wx.removeStorageSync != undefined) {wx.removeStorageSync(key);}},/*** 清空*/clear: function() {if (localStorage != undefined) {localStorage.clear();} else if (uni.clearStorageSync != undefined) {uni.clearStorageSync();} else if (wx.clearStorageSync != undefined) {wx.clearStorageSync();}}
};if (typeof module != 'undefined') module.exports = Str;

封装 localStorage 缓存，兼容网页，微信小程序，uni-app相关推荐

小程序怎么清服务器缓存,怎么清理微信小程序缓存微信小程序缓存删除的方法...
微信小程序上线之后,关注的小程序越多,哪么将占用的手机空间就越大,这些程序会产生一定的缓存,那么怎么清理小程序缓存呢?微信小程序内的缓存到底如何清除?和小编一起来看看删除微信小程序缓存的方法吧. 一些 ...
Java后端对接微信支付(微信小程序、APP、PC端扫码)非常全，包含查单、退款
首先我们要明确目标,我们点击微信支付官网 ,我们主要聚焦于这三种支付方式,其中JSPAI与APP主要与uniapp开发微信小程序与APP对接,而NATIVE主要与网页端扫码支付对接 1.三种支付统一 ...
微信小程序、app集成微信支付
一.微信小程序支付开发文档:https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_11&index=2 申请小程序 ...
H5页面内嵌到微信小程序和APP，做分享操作
前言最近接到项目新需求,H5项目需要内嵌到微信小程序和APP里,然后将H5页面分享出去,被分享的人可以点击消息跳转到H5页面.H5页面不难,难的是要与微信小程序和APP进行交互,因为以前也没有接触过 ...
微信小程序uni.getImageInfo踩坑大计划
B站https://www.bilibili.com/read/cv6317437 如果你在使用getImageInfo的时候真机调试没问题,上传生成体验版的时候或者是线上版本没反应,主要原因是网络图 ...
Android APP跳转微信小程序和APP跳转支付宝小程序传参
Android APP跳转微信小程序和APP跳转支付宝小程序传参微信开放文档链接 MINIPROGRAM_TYPE_PREVIEW:体验版. MINIPROGRAM_TYPE_TEST:开发版 MI ...
二手市场回收基于微信小程序和app两种应用开发uniapp
回收纸皮书籍.服装饰品.箱包鞋帽.床上用品.塑料制品.其他 ,微信小程序.app开发源码下载地址:请点击下载
微信小程序--在app.js 和其他页面中更改globalData的值
微信小程序--在app.js 和其他页面中更改globalData的值 app.js中修改其他页面 app.js中修改在app.js中,应当在小程序初始化完成以后再更改全局变量的值,即在onLau ...
uniapp的打包：h5、微信小程序以及APP方式
uniapp的打包:h5.微信小程序以及APP方式 H5打包微信小程序打包 App打包本人用的是HBuilder编译器,学习uniapp时b站某位大大推荐的,我刚开始接触代码时候也用过,那时候并不 ...
基于uniapp+vue+微信小程序+安卓app电影院订票小程序H5网站设计
开发技术:uniapp + vue + ElementUI + 微信小程序 + 安卓app + Springboot 开发工具环境:HBuilder + 微信开发者工具 + VsCode + Idea ...

封装 localStorage 缓存，兼容网页，微信小程序，uni-app

封装 localStorage 缓存，兼容网页，微信小程序，uni-app相关推荐

最新文章

热门文章