我们都知道store中的数据是不能持久化储存的,在刷新浏览器的时候store中的数据都会被清空,但有时候我们需要持久化储存一些数据,这里可以用到浏览器的本地存储(session Storage、Local Storage、cookie)。
比如这里,当我从登录页面进入到主页的时候,接口的回调函数中有主页侧边栏的数据的,正常情况下,通过
this.$store.commit()
把数据存到state里,并在需要的页面通过
this.$store.state
读取,但是,当我们刷新后发现侧边栏里的数据不见了。
以上原因是因为把传参的代码写到了登录里,但是刷新时并没有执行登录这段代码,state里的数据因为刷新而清空了,所以侧边栏没有数据。
因此我们需要使用浏览器本地存储来中转一下数据,这里我们使用Local Storage(cookie是最合适的,但是使用方法需要自己封装不够友好,余下两个有自带的方法),
存储:localStorage.setItem("name","bonly") 读取:localStorage.getItem("name") 覆盖:localStorage.setItem("name","TOM") //这里与存储的方法一样,只是覆盖了原本的内容。 删除:localStorage.removeItem("name")
于是按照以上代码把数据存到localStorage中,但是发现,还是读不出来,博客上看了一下,原来是本地存储的一个限制是它将数组存储为字符串,为了克服这个问题,我们使用
JSON.stringify()
将数组存储在本地存储中。当我们需要数组的时候,因为JSON.stringify使他变成了字符串,所以我们可以通过
JSON.parse()
使用从本地存储中获取数组。如图所示,现在侧边栏正常显示了。
在element表格中如果要选中多选按钮的只能通过点击表格第一列的方块来实现选中,而没有通过点击整行来选中的事件,下面为大家介绍一种取巧的方法。来到elemen...
请求中如何以表单的形式提交参数大家看,我们的请求除了以常规对象参数提交的情况外,还有一种是使用表单形式提交,以下是在vue中使用表单形式来提交参数的例子首先,第...
ISO、GHO、ESD是三种不同的镜像文件格式,它们各自有其优势和劣势首先,ISO镜像文件格式是一种用于存储光盘映像的文件格式,它可以根据ISO-9660有关C...
MBR(Master Boot Record)和GPT(GUID Partition Table)是两种不同的硬盘分区表类型。它们的主要区别在于支持的最大分区数...
继续上篇文章es6函数优化,我们继续来看看箭头函数的作用。箭头函数有更短的写法,以前写函数都需要声明function() 单一参数 => 表达式如果没有参数...
之前我们介绍了es6的变量、对象、字符串。继之前的文章,我们继续了解es6所带来的新用法——函数在es5系列中function形参并不能设置默认值,如果不传的话...