localStorage在不同頁面之間的設置值與取值--加密 localStorage與解密localStorage

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