localStorage存储和获取

最新推荐文章于 2024-08-15 20:33:20 发布

弗兰克的天空

最新推荐文章于 2024-08-15 20:33:20 发布

阅读量1.8k

点赞数

分类专栏：网站前端

本文链接：https://blog.csdn.net/frank_fong/article/details/84560768

版权

网站前端专栏收录该内容

75 篇文章 1 订阅

订阅专栏

<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>localStorage</title>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
	<div id="app">
		<h1 class="container">localStorage</h1>
		<el-select v-model="themeVal" placeholder="请选择" size="mini" style="width: 100px;" @change="changeTheme">
			<el-option v-for="item in themeList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
		</el-select>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script>
		//localStorage方法
		let store = {
			save(key, value) {
				localStorage.setItem(key, JSON.stringify(value));
			},
			fetch(key) {
				return JSON.parse(localStorage.getItem(key)) || [];
			}
		}

		let theme = store.fetch('theme'); //从store获取主题

		new Vue({
			el: '#app',
			data: {
				//主题
				themeVal: theme,
				themeList: [{
						value: "light",
						label: "浅色"
					},
					{
						value: "dark",
						label: "深色"
					}
				]
			},
			methods: {
				//修改主题
				changeTheme() {
					store.save('theme', this.themeVal); //保存到store
				}
			}
		});
	</script>
</body>

</html>