封装 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;

 

相关推荐
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页
实付 49.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值