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

localStorage在不同页面之间的设置值与取值--加密 localStorage与解密localStorage的更多相关文章

  1. java 八种基本数据类型之初始值、取值范围、对应的封装类

      CreateTime--2017年12月6日10:03:53 Author:Marydon 一.java数据类型之基本数据类型 (二)八种基本数据类型的特征 import java.math.Bi ...

  2. C# 获取一定区间的随即数 0、1两个值除随机数以外的取值方法(0、1两个值被取值的概率相等)

    获取随机数 举例:0-9 Random random = new Random(); int j = random.Next(0, 9); 0.1两个值被取值的概率相等 int a = Math.Ab ...

  3. SELECT INTO和INSERT INTO SELECT的区别 类似aaa?a=1&b=2&c=3&d=4,如何将问号以后的数据变为键值对 C# 获取一定区间的随即数 0、1两个值除随机数以外的取值方法(0、1两个值被取值的概率相等) C# MD5 加密,解密 C#中DataTable删除多条数据

    SELECT INTO和INSERT INTO SELECT的区别   数据库中的数据复制备份 SELECT INTO: 形式: SELECT value1,value2,value3 INTO Ta ...

  4. servlet和jsp存值和取值的方式

    在servlet和jsp中存值和取值的方式由两种 1种是setAttribute和getAttribute 2种是c:forEach

  5. (27)session(设置值、取值、修改、删除)

    session的由来 Cookie虽然在一定程度上解决了“保持状态”的需求,但是由于Cookie本身最大支持4096字节,以及Cookie本身保存在客户端,可能被拦截或窃取,因此就需要有一种新的东西, ...

  6. 关于jsp页面的复选框(checkbox)取值的获取问题

    复选框的取值问题可以使用js和jQuery来获取: jQuery API : each(callback) :以每一个匹配的元素作为上下文来执行一个函数. :checked :匹配所有选中的被选中元素 ...

  7. C#Dictionary键值对取值用法

    必须包含名空间System.Collection.Generic     Dictionary里面的每一个元素都是一个键值对(由二个元素组成:键和值)     键必须是唯一的,而值不需要唯一的     ...

  8. mybatis映射文件参数处理 #{}取值与${}取值的区别

    #{}:是以预编译的映射,将参数设置到sql语句中,和jdbc的preraredStatement一样,使用占位符,防止sql注入. ${}:取出的值会直接拼装在sql中,会有安全问题. 大多数情况下 ...

  9. cookie的存值和取值方式

    最近在开发中存储用户名信息,为了方便就使用了sessionStorage,但是写好才想到sessionStorage在IE下面是不支持的,所以无奈还是使用了cookie 那么接下来就谈谈怎么使用coo ...

随机推荐

  1. 微信小程序之上传图片和图片预览

    这几天一直负责做微信小程序这一块,也可以说是边做边学习吧,把自己做的微信小程序的一些功能分享出来,与大家探讨一下,相互学习相互进步. 先看下效果图 只写了一下效果样式的话希望大家不要太在意,下面马路杀 ...

  2. Centos 静态网络配置

    cat /etc/sysconfig/network-scripts/ifcfg-ens33 DEFROUTE="yes" IPV4_FAILURE_FATAL="no& ...

  3. 快速破解Goland

    两种激活方式永久激活:推荐优先使用,永久有效有效期激活:如果你实在激活不了又着急使用,这是备选激活方案,简单快捷 一.永久激活 1.下载新版破解补丁 点击链接 https://pan.baidu.co ...

  4. 二叉搜索树中第K小的元素

    给定一个二叉搜索树,编写一个函数 kthSmallest 来查找其中第 k 个最小的元素. 说明:你可以假设 k 总是有效的,1 ≤ k ≤ 二叉搜索树元素个数. 示例 1: 输入: root = [ ...

  5. 201871010113-刘兴瑞《面向对象程序设计(java)》第十三周学习总结

    项目 内容 这个作业属于哪个课程 <任课教师博客主页链接>https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址>http ...

  6. Java流程控制之选择语句

    选择语句 选择语句也称之为判断语句,主要有2种写法,一种是if语句,一种是switch语句.下面我们就详细的介绍一下这2种语句的用法. 判断语句if if语句第一种形式: if 格式: 执行流程 首先 ...

  7. SP15637 Mr Youngs Picture Permutations 高维动态规划

    问题描述 LG-SP 题解 发现\(n,k\)都非常小,尤其是\(k,k\le 5\),于是直接开\(5\)维进行\(\mathrm{DP}\) 用记忆化搜索实现. \(\mathrm{Code}\) ...

  8. JUnit & JMockit单元测试

    JUnit&JMockit单元测试总结 1.JUnit简介 Java单元测试框架业内应用较多的是JUnit,它由Kent Beck和Erich Gamma建立,逐渐成为源于Kent Beck的 ...

  9. ASP.NET Core 集成测试中模拟登录用户的一种姿势

    不管哪种用户验证方式,最终都是在验证成功后设置 HttpContext.User ,后续处理环节通过 HttpContext.User 获取用户信息.如果能直接修改 HttpContext.User ...

  10. 源码学习之Spring (系统架构简单解析)

    Spring Framework 系统架构总览图 Spring Framework的模块依赖关系图 Spring Framework各个模块功能说明 Spring核心模块 模块名称 主要功能 Spri ...