localStorage浏览器缓存前端更改的信息，即使浏览器刷新依然保存更改内容

localStorage浏览器缓存

一、首先判断浏览器是否支持localStorage（一般来说都会支持）

		//* 1.判断浏览器是否支持localStorage这个属性
		if(!window.localStorage) {
			alert("当前浏览器不支持localStorage，请升级您的浏览器，以支持localStorage！");
		} else {
			console.log("您的浏览器支持localStorage！");
		}

二、存储值

以下是实际运用的示例代码

const showAction = ref()
showAction .value = false
const loadAtion = () => {
  const savedState = localStorage.getItem('showAction ') #主要是这一行代码获取值
  if (savedState !== null) {
    showAction .value = JSON.parse(savedState) #对于字符串不一致要先进行转换
  }
}
const saveAction = () => {
  localStorage.setItem('showAction ', JSON.stringify(showAction .value))#主要是这一行代码存储值
} #此方法放在要进行存储的位置实现存储并刷新
onMounted(() => {
  loadAtion ()
})

其中showAction是我们可以绑定的要变化的值，首先要获取到值（localStorage.getItem），其次是存储（localStorage.setItem）。

其次还有删除值（localStorage.removeItem），不过一般要指定删除才会用到。

介绍简单的localStorage使用

获取数据方式

//第一种方法获取
let saveName = localStorage.getItem("key"); #补充：let和const均可
//第二种方法获取
let saveName = localStorage.key;
//第三种方法获取
let saveName = localStorage['key'];

存储数据方式

保存数据

localStorage.setItem("key", "value");

//第一种方法存储
let saveName = localStorage.setItem("key");
//第二种方法存储
let saveName = localStorage.key;
//第三种方法存储
let saveName = localStorage['key'];

删除数据

// 删除所有缓存
localStorage.clear();
// 删除指定的键值
localStorage.removeItem("key");