前端封装本地存储操作

在项目跟目录下创建storage文件夹下创建index.js文件 

写入下面代码

//存储数据
const setStorage =(key,value)=>{
    if(typeof value === 'object'){
        value = JSON.stringify(value)
    }
    localStorage.setItem(key,value)
}

//获取数据
const getStorage = (key)=>{
    const data = localStorage.getItem(key)
    try {
        return JSON.parse(data)    
    } catch (error) {
        return data  
    }
}

//删除数据
const removeStorage = (key)=>{
    localStorage.removeItem(key)
}

// 清空本地存储
const clearStorage = ()=>{
    localStorage.clear()
}

//导出方法
export {
    setStorage,
    getStorage,
    removeStorage,
    clearStorage
}

在需要使用的页面通过import 导入

然后直接调用方法使用

import { setStorage ,getStorage,removeStorage,clearStorage } from '../../storage'  //注意是自己定义的文件路径


setStorage(key,value) //存储数据,必须传入key和参数

getStorage(key) //读取数据,必须传入读取的key

removeStorage(key) //删除数据,必须传入要删除的key

clearStorage( ) //清空本地存储, 注意:不需要传参

案例  这里以vue3为例

<template>
  <div>
      <button @click="cunchu">存储</button>
      <button @click="duqu">读取</button>
      <button @click="clear">清空</button>
      <button @click="remove">删除</button>
  </div>
</template>

<script setup>

//引入定义的封装存储
import { setStorage ,getStorage,removeStorage,clearStorage } from '../../storage'

//引入定义响应式ref
import { ref } from 'vue'

//定义数组
const list = ref([
  {
  name:'张三',
  age:18
},
{
  name:'lisi',
  age:19
}
])
//定义token这里是模仿的字符串
let token = ref('fdafasfafsdafsdssssssssfdsfsdgsgsdgdfhgsdhsdfhdshsdhfsd')

//点击存储按钮存储数组和字符串
const cunchu = ()=>{
  setStorage('students',list.value)
  setStorage('token',token.value)
}

//点击读取读取存储的数组和字符串
const duqu = ()=>{
  let s = getStorage('students')
  let t = getStorage('token')
  console.log(s);
  console.log(t);
}

//点击删除删除存储的数组
const remove = ()=>{
  removeStorage('students')

}

//点击清空清空本地存储
const clear = ()=>{
  clearStorage()

}

</script>