设置localstorage过期时间

最新推荐文章于 2023-11-21 22:02:51 发布

shengjon

最新推荐文章于 2023-11-21 22:02:51 发布

阅读量221

点赞数

分类专栏： web 文章标签： javascript 前端 html5 localstorage

本文链接：https://blog.csdn.net/shengjon/article/details/119320502

版权

web 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<button onclick="setStorage()">存储localstorage</button>
	<button onclick="getStorage()">获取localstorage</button>
	<script>
		// 获取 localstorage
		function getStorage() {
			let storage = new Storage();
			let value = storage.getItem('权博');
			console.log('我是value', value);
		}
		// 设置 localstorage
		function setStorage() {
			let storage = new Storage();
			storage.setItem('权', ['身高', '一米五', '头发密度','极秃'], 'fixed');
		}
		class Storage {
			constructor() {
				this.name = 'Storage'
			}
			// 设置存储
			// key:需要存储的数据
			// value:需要存储的数据
			// expres：过期时间，毫秒单位 number 类型 ，如果为 'fixed' 则在 0 点清除
			setItem(key, value, expires) {
				// 判断 expires 是否为 'fixed', 如果是则计算出 当前时间到 0 点的毫秒差
				if (expires === 'fixed') {
					expires = (new Date(new Date().toLocaleDateString()).getTime() + (24 * 60 * 60 * 1000)) - new Date().getTime();
				};
				let obj = {
					value: value,
					expires: expires,//有效时间
					startTime: new Date().getTime()//记录存储数据的时间，转换为毫秒值存下来
				}
				// 判断是否设置了有效时间
				if (obj.expires) {
					// 如果设置了时间，把obj转换数据类型转换为字符串对象存起来
					localStorage.setItem(key, JSON.stringify(obj))
				}
				// 如果没有设置有效时间，直接把value值存进去
				else {
					localStorage.setItem(key, JSON.stringify(obj.value))
				}
			}

			// 获取存储数据
			getItem(key) {
				// 先定义一个变量临时存放提取的值
				let temp = JSON.parse(localStorage.getItem(key));
				// 判断有没有设置expires属性
				// 如果有，就需要判断是否到期了
				if (temp && temp.expires) {
					let data = new Date().getTime();
					if (data - temp.startTime > temp.expires) {
						// 此时说明数据已过期,清除掉
						localStorage.removeItem(name);
						// 直接return
						return false
					}
					else {
						// 如果没有过期就输出
						return temp.value
					}
				}
				// 如果没有设置，直接输出
				else {
					return temp
				}
			}
			//移出缓存
			removeItem(name) {
				localStorage.removeItem(name);
			}
			//移出全部缓存
			clear() {
				localStorage.clear();
			}
		}
	</script>
</body>

</html>