一文带你实现刷新页面数据不丢失(操作状态保留)效果

        页面刷新后对数据的操作状态进行保留，也就是页面刷新数据不丢失效果，是我们对前端项目开发中一个算是比较基本的效果了。其实实现的话也是很简单的，今天就来带你一文彻底弄懂此效果的实现。

---

其实总结起来有以下三个比较重要的点：

       1- 监听要保留状态的数据，每当改变其状态都将其存储在LocalStorage中。

watch: {
	list: {
	   deep: true,
	   handler(news, olds) {
	        localStorage.setItem("list", JSON.stringify(news))
	   }
    }
}

       2- 使用LocalStorage或者SissenStorage对操作后的数据进行本地存储。其中LocalStorage可以存储长期数据，刷新或者下次进入页面时都能对操作的数据进行保留。如果用SissenStorage的话，则刷新还会存在，但页面关闭时存储的数据便会被自动清除，下次进入不会存在，这个可以根据自己的情况去选择使用。

        

       3- 每当刷新页面时，先查看LocalStorage中是否有上次存储的改变状态的数据，如果有，就使用上次改变后的数据，没有的话，就使用原来的数据。

data() {
    return {
		list: JSON.parse(localStorage.getItem("list")) || [{},{},{}];
           // LocalStorage有值则使用其里面的值，没有则使用原数据的值。
					

下面是完整代码，如果需要深度测试可以拿去理解哦！

<template>
	<div class="about">
		<div class="listPage">
			<ul>
				<li v-for="(item,key) of list" :key=item.id>
					<input type="checkbox" v-model="item.isShow" />
					<span>{{item.name}}</span>
					<span class="content">{{item.wisdom}}</span>
					<button @click="delOncePage(key)">删除</button>
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				list: JSON.parse(localStorage.getItem("list")) || [{
						id: "1",
						name: "千与千寻",
						wisdom: "人生就是一列开往坟墓的列车",
						isShow: true
					},
					{
						id: "2",
						name: "你的名字",
						wisdom: "你会哭着笑,笑着哭,是因为你的心,早已超越了自己",
						isShow: true
					},
					{
						id: "3",
						name: "言叶之庭",
						wisdom: "人生就是一列开往坟墓的列车",
						isShow: true
					},
					{
						id: "4",
						name: "千与千寻",
						wisdom: "晴朗的早晨,我会按部就班",
						isShow: true
					},
					{
						id: "5",
						name: "千与千寻",
						wisdom: "相比于蓝天,我更想选择阳菜",
						isShow: true
					}
				]
			}
		},
		methods: {
			delOncePage(key) {
				this.list.splice(key, 1)
			}
		},
		watch: {
			list: {
				deep: true,
				handler(news, olds) {
					localStorage.setItem("list", JSON.stringify(news))
				}
			}
		}
	}
</script>
<style>
	* {
		margin: 0 auto;
		padding: 0;
		list-style: none;
	}

	.listPage {
		width: 600px;
	}

	.listPage li {
		width: 100%;
		background-color: antiquewhite;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.listPage li .content {
		width: 60%;
		height: 50px;
		line-height: 50px;
		text-align: left;
	}
	.listPage li input[type=checkbox]{
		zoom: 2;
	}
</style>

以上就是页面刷新数据不掉的效果实现了，希望能够有所帮助！