vue seesion&localstorage-优快云博客

本文详细介绍了一个使用Vue框架的示例，展示了如何通过localStorage进行数据的添加、修改、删除及清空操作，同时提供了完整的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div>
    <p>{{sessionStora}}</p>
  <button v-on:click="add">add</button>
  <button v-on:click="show">show</button>
  <button v-on:click="modify">modify</button>
  <button v-on:click="remove">remove</button>
  <button v-on:click="clear">clear</button>
  </div>
</template>
<script>
import {setSessionStorage,getSessionStorage,modifySessionStorage,removeSessionStorage,clearSessionStorage} from "@/assets/js/sessionStorage.js"
import {setLocalStorage,getLocalStorage,modifyLocalStorage,removeLocalStorage,clearLocalStorage} from "@/assets/js/localStorage.js"
export default {
  data(){
    return{
     sessionStora:""
    }
  },
  methods:{
    add(){
    // setSessionStorage("a","a")
    // setSessionStorage("b","b")
    // setSessionStorage("c","c")
    // this.sessionStora=JSON.stringify(sessionStorage)
     setLocalStorage("a","a")
     setLocalStorage("b","b")
     setLocalStorage("c","c")
     this.sessionStora=JSON.stringify(localStorage)
    },
    modify(){
     //modifySessionStorage("b","pp")
    // this.sessionStora=JSON.stringify(sessionStorage)
     setLocalStorage("b","pp")
     this.sessionStora=JSON.stringify(localStorage)

    remove(){
   //  removeSessionStorage("b")
    // this.sessionStora=JSON.stringify(sessionStorage)
       removeLocalStorage("b")
   this.sessionStora=JSON.stringify(localStorage)
    },
    clear(){
     // clearSessionStorage()
     // this.sessionStora=JSON.stringify(sessionStorage)
     clearLocalStorage()
     this.sessionStora=JSON.stringify(localStorage)
    },
    show(){
      // this.sessionStora=getSessionStorage("a")
      this.sessionStora=getLocalStorage("a")
    },
  }
}
</script>
<style>

</style>

//localstorage.js
export function setLocalStorage(key,value){
  localStorage.setItem(key,value)
}
export function getLocalStorage(key){
 return localStorage.getItem(key)
}
export function removeLocalStorage(key){
  localStorage.removeItem(key)
}
export function clearLocalStorage(){
  localStorage.clear()
}

//sessionstorage.js
export function setSessionStorage(key,value){
  sessionStorage.setItem(key,value)
}
export function getSessionStorage(key){
  return sessionStorage.getItem(key)
}
export function modifySessionStorage(key,value){
  sessionStorage.setItem(key,value)
}
export function removeSessionStorage(key){
  sessionStorage.removeItem(key)
}
export function clearSessionStorage(){
  sessionStorage.clear()
}

转载于:https://www.cnblogs.com/Zhengxiaoxiao/p/10868728.html