24(本地存储)localStorage&sessionStorage

最新推荐文章于 2024-10-01 20:12:28 发布

七色的天空

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量317

点赞数 6

分类专栏： 08_新H5 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/q506174602/article/details/135625798

版权

08_新H5 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>localStorage&sessionStorage</title>
</head>
<body>
	<!-- 支持性检测 
		
	-->
	<script type="text/javascript" src="../time.js"></script>
	<script type="text/javascript">
		var day = -2;
		console.dir(window);
		if (typeof Storage != 'undefined') {
			console.log('支持')
		} else {
			console.log('不支持')
		}

		// 客户端 存储数据有两个对象: localStorage  sessionStorage

		/*
			localStorage: 能够长久保存整个网站(同源)的数据, 没有过期时间, 需要手动去除
				删除缓存: Ctrl + shift + del
				强制刷新浏览器: Ctrl + shift + R
				数据存储形式: 键值对, key: value

				存储数据的大小: 5120KB 5M
		*/
		localStorage.token = '123';
		console.log(localStorage.token);

		var userInfo = {
			name: '李明',
			age: 18,
			gender: 1,
			tel: 18977887766,
			avatar: 'http://www.baidu.com'
		}
		var studentsArr = ['李明', '李亮', '李红'];
		var studentsObj = {value: studentsArr, expireTime: '2022-06-02'};
		localStorage.setItem('Authorization', '456');
		console.log(localStorage.getItem('Authorization'));

		// 注意: 复杂数据类型一定要转成字符串形式
		localStorage.user = JSON.stringify(userInfo);
		localStorage.students = JSON.stringify(studentsObj);
		// localStorage.students = studentsObj;
		localStorage.age = {value: 18.2, expireTime: '2022-07-02'};

		// console.log( JSON.parse(localStorage.students).students);
		console.log('-------', getStorageValueByKey('students'));
		// console.log('-------', localStorage.getItem('students'));

		localStorage.removeItem('token');


		// localStorage.getItem(key);
		function getStorageValueByKey(key) {
			// 解析本地存储中的对象
			var obj = JSON.parse(localStorage.getItem(key));

			if (obj.expireTime) {
				console.log(getNormalDate(obj.expireTime));
				if (new Date().getTime() > obj.expireTime) {
					// 如果过期时间已经过了，从本地存储中移除对应的项
					localStorage.removeItem(key);
					return null
				}
				return obj.value
			} else {
				return obj.value
			}
		}


		// localStorage.setItem(key)
		setStorageValueByKey('students2', ['李明', '李亮', '李红'])
		function setStorageValueByKey(key, value) {
			var expireTime = Date.now() + 24 * 60 * 60 * 1000 * day;
			var obj = {
				value: value,
				expireTime: expireTime
			}
			localStorage.setItem(key, JSON.stringify(obj));
		}
		console.log(getStorageValueByKey('students2'));


		// sessionStorage: 临时保存同一窗口或者标签页的数据,在关闭窗口或者标签页之后,将会自动删除这些数据
		// sessionStorage.getItem(key); sessionStorage.setItem(sessionStorage)
		// sessionStorage.removeItem(sessionStorage)
	</script>
</body>
</html>

上述运行结果：