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