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

原创

朦胧淡月 2022-09-01 17:58:09 ©著作权

©著作权归作者所有：来自51CTO博客作者朦胧淡月的原创作品，请联系作者获取转载授权，否则将追究法律责任

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