vue中sessionStorage的使用
转载:https://www.cnblogs.com/denken/p/11197612.html
localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。
sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。
提示: 如果你想在浏览器窗口关闭后还保留数据,可以使用 localStorage 属性, 改数据对象没有过期时间,今天、下周、明年都能用,除非你手动去删除。
1.方法
sessionStorage.key(int index) //返回当前 sessionStorage 对象的第index序号的key名称。若没有返回null。
sessionStorage.getItem(string key) //返回键名(key)对应的值(value)。若没有返回null。
sessionStorage.setItem(string key, string value) //该方法接受一个键名(key)和值(value)作为参数,将键值对添加到存储中;如果键名存在,则更新其对应的值。
sessionStorage.removeItem(string key) //将指定的键名(key)从 sessionStorage 对象中移除。
sessionStorage.clear() //清除 sessionStorage 对象所有的项。
2,存储数据
2.1 采用setItem()方法存储
sessionStorage.setItem('testKey','这是一个测试的value值'); // 存入一个值
2.2 通过属性方式存储
sessionStorage['testKey'] = '这是一个测试的value值';
2.3 存储Json对象
sessionStorage也可存储Json对象:存储时,通过JSON.stringify()将对象转换为文本格式;读取时,通过JSON.parse()将文本转换回对象。
var userEntity = {
name: 'tom',
age: 22
};
// 存储值:将对象转换为Json字符串
sessionStorage.setItem('user', JSON.stringify(userEntity));
// 取值时:把获取到的Json字符串转换回对象
var userJsonStr = sessionStorage.getItem('user');
userEntity = JSON.parse(userJsonStr);
console.log(userEntity.name); // => tom
3,读取数据
3.1 通过getItem()方法取值
sessionStorage.getItem('testKey'); // => 返回testKey对应的值
3.2 通过属性方式取值
sessionStorage['testKey']; // => 这是一个测试的value值
vue中sessionStorage的使用的更多相关文章
- vue中使用localStorage存储信息
一 什么是localStorage 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionSto ...
- Vue中directives的用法
关于 vue 中 directives 的用法问题,详细可以参考vue官方对directives的解释 当前文章主要讲述directives怎么用,directives做权限按钮的功能 ###1. d ...
- Vue中组件
0828自我总结 Vue中组件 一.组件的构成 组件:由 template + css + js 三部分组成(.vue文件) 1)组件具有复用性 2) 复用组件时,数据要隔离 3) 复用组件时,方法不 ...
- 小白都能看懂的vue中各种通信传值方式,附带详细代码
1.路由通信传值 路由通信是通过路由跳转用query把参数带过去,也是vue常用的通信手段. 例子: 创建并在路由注册一个组件Head <template> <div id=&quo ...
- vue中8种组件通信方式, 值得收藏!
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就 ...
- Vue中使用matomo进行访问流量统计的实现
Vue中使用matomo进行访问流量统计 原文链接 前言 之前做到了一个页面及接口访问流量统计的需求, 然后在网上找了很多帖子,发现有些有的但是写的都不是很详细,所以今天就整理了一下 正文 第一步 首 ...
- Vue中组件之间的通信方式
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 本文会介绍组件间通信的8种方式如下图所示, 并介绍在不同的场景下如何选择有效方式实现的 ...
- Vue中的8种组件通信方式
Vue是数据驱动视图更新的框架,所以对于vue来说组件间的数据通信非常重要. 常见使用场景可以分为三类: 父子组件通信: props / $emit $parent / $children provi ...
- vue中如何不通过路由直接获取url中的参数
前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...
随机推荐
- CentOS7.4下安装部署HAProxy高可用群集
目录第一部分 实验环境第二部分 搭建配置web服务器第三部分 安装配置haproxy服务器第四部分 测试验证第五部分 haproxy配置相关详细解释 第一部分 实验环境1.一台harpoxy调度服务器 ...
- [Beta]Scrum Meeting#4
github 本次会议项目由PM召开,时间为5月9日晚上10点30分 时长15分钟 任务表格 人员 昨日工作 下一步工作 木鬼 撰写博客整理文档 撰写博客整理文档 swoip 改进界面 改进界面 bh ...
- dateTime格式转换
select Convert(varchar(8),GETDATE(),112) Select replace(CONVERT(varchar(8), GETDATE(), 108),':','')
- 一分钟理解什么是REST和RESTful
从事web开发工作有一小段时间,REST风格的接口,这样的词汇总是出现在耳边,然后又没有完全的理解,您是不是有和我相同的疑问呢?那我们一起来一探究竟吧! 就是用URL定位资源,用HTTP描述操作. 知 ...
- 剑指offer:序列化二叉树
题目描述: 请实现两个函数,分别用来序列化和反序列化二叉树 思路分析: 这里一开始有点不明白题目的意思.实际上序列化应该指把二叉树用某种编码方式表示,这里一般是字符串的形式.而反序列就是将之前生成的序 ...
- Invalid bound statement (not found) 终极解决办法
网上已经有很多文章说明可能导致这个报错的原因,无非是以下几种:1.检查xml文件的namespace是否正确 2.Mapper.java的方法在Mapper.xml中没有,然后执行Mapper的方法会 ...
- TX-LCN5.0.2分布式事务框架源码分析-关键线索罗列-txc部分
1.注解TxcTransaction2.在其注解接口附近查找aop配置:TransactionAspect3.runTransaction是在执行事务业务代码时的包装逻辑4.transactionSe ...
- Mysql 排序规则选择
排序规则:是指对指定字符集下不同字符的比较规则.其特征有以下几点: 1. 两个不同的字符集不能有相同的排序规则 2. 两个字符集有一个默认的排序规则 3. 有一些常用的命名规则.如_ci结尾表示大小写 ...
- Data Flow ORB-SLAM for Real-Time Performance on Embedded GPU Boards
张宁 Data Flow ORB-SLAM for Real-Time Performance on Embedded GPU Boards 数据流ORB-SLAM可在嵌入式GPU板上实现实时性能链接 ...
- 解决 android push framework.jar 不生效的问题
. . . . . 在 Android 采用 ART 虚拟机后,为了提高运行时效率,在编译期间会将 jar 包中的 dex 文件编译为 odex.vdex 等文件.而这些文件并不存放在 framewo ...