localStorage在不同页面之间的设置值与取值--加密 localStorage与解密localStorage

Posted 2022-04-27 iwishicould

在aa.vue页面

<template>
  <div>
    <h1>在aa页面设置值</h1>
    <button @click="shezhi">用localstorage设置值localSt</button>
  </div>
</template>

<script>
export default 
  data() 
    return 
      list: [
         id: 1, name: "张三" ,
         id: 2, name: "张三1" ,
         id: 3, name: "张三1" 
      ]
    ;
  ,
  methods: 
    shezhi() 
      // localStorage.setItem(“key”, JSON.stringify(obj));   // 存储对象  先转化
      // JSON.parse(window.localStorage.getItem(key))      //取对象  也要先转化
      window.localStorage.setItem("curName", JSON.stringify(this.list));
    
  
;
</script>

<style lang="less" scoped>
.el-main 
  line-height: 25px;

</style>

在bb.vue

<template>
  <div>
    <h1>获取aa页面的localstorage的值</h1>
    <button @click="quzhi">取值</button>
    <h1>下面是aa页面的值</h1>

    <p v-for="item in myarr" :key="item.id">
      <span>item.id-----item.name</span>
    </p>

  </div>
</template>

<script>
export default 
  data() 
    return 
      myarr: []
    ;
  ,

  methods: 
    quzhi() 
      this.myarr = JSON.parse(window.localStorage.getItem("curName"));
      console.log(this.myarr); //有你值
    
  
;
</script>

<style lang="less" scoped>
.el-main 
  line-height: 25px;

</style>

 

加密 localStorage与解密localStorage

<template>
  <div>
    <h1>加密与解密</h1>
    <button @click="shezhi">加密localStorage</button>

    <button @click="jie">解密localStorage</button>获取值</div>
</template>

<script>
export default 
  data() 
    return 
      list: [
         id: 1, name: "张三" ,
         id: 2, name: "张三1" ,
         id: 3, name: "张三1" 
      ]
    ;
  ,
  methods: 
    shezhi() 
      localStorage.setItem(
        "jiami",
        window.btoa(window.encodeURIComponent(JSON.stringify(this.list)))
      );
    ,

    jie() 
      var obj = JSON.parse(
        decodeURIComponent(window.atob(localStorage.getItem("jiami")))
      );
      console.log(obj);
    
  

  // //用中文 记得加encodeURIComponent()!
  // localStorage.setItem("obj",window.btoa(window.encodeURIComponent(JSON.stringify(obj))));

  //用中文 记得加decodeURIComponent()!
  // var obj=JSON.parse(decodeURIComponent(window.atob(localStorage.getItem("obj"))));
  // console.info(obj);
;
</script>