This article takes you to achieve the effect of refreshing the page without losing data (operation status is preserved)

        After the page is refreshed, the operation state of the data is preserved, that is, the effect of page refresh without losing data is a relatively basic effect in our development of front-end projects. In fact, it is very simple to realize it. Today I will take you an article to fully understand the realization of this effect.

---

In fact, there are three more important points in summary:

       1- Listen to the data to keep the state, and store it in LocalStorage whenever its state is changed.

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

       2- Use LocalStorage or SissenStorage to store the operated data locally . Among them, LocalStorage can store long-term data, and the operation data can be retained when refreshing or entering the page next time. If you use SissenStorage, the refresh will still exist, but the stored data will be automatically cleared when the page is closed, and will not exist next time you enter it. You can choose to use it according to your own situation.

        

       3- Whenever the page is refreshed, first check whether there is any data that has changed state last stored in LocalStorage, if there is, use the last changed data, if not, use the original data.

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

The following is the complete code, if you need in-depth testing, you can take it to understand!

<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>

The above is the effect that the page refresh data will not be lost, I hope it can be helpful!