vue中使用localStorage存储信息

JSON。parse()作用是将字符串转化成json数组，JSONstringify()作用是将json数组转换成字符串

对浏览器来说，使用Web Storage存储键值对比存储Cookie方式更直观，而且容量更大，它包含两种：localStorage和sessionStorage

所以上次使用cookie的时候就遇到了一个坑，设置后马上访问session会获取不到，蛋痛，还需要刷新一下，原因是：

当我们首次访问设置Cookie的页面是，服务器会把设置的Cookie值通过响应头送过来，告诉浏览器将cookie存储的本地相应文件夹中(注意：第一次访问时本地还没有存储Cookie，所以此时获取不到值)；

当第二次访问时（或是进行cookie设置后，过期前所有的访问）时，请求头信息中你都会把Cookie值携带。

localStorage有效期是永久的。一般的浏览器能存储的是5MB左右。sessionStorage api与localStorage相同。

sessionStorage默认的有效期是浏览器的会话时间（也就是说标签页关闭后就消失了）。

localStorage作用域是协议、主机名、端口。（理论上，不人为的删除，一直存在设备中）

sessionStorage作用域是窗口、协议、主机名、端口。

知道了这些知识点后，你的问题就很好解决了。

localStorage是window上的。所以不需要写thislocalStorage，vue中如果写this，是指vue实例。会报错

如果你是用vue脚手架，在运行时是打包后的文件，文件夹已经变了，只能在打包阶段用 node 做处理，比如把文件夹名字在打包时注入到vue代码里。

如果你是用cdn直接引的vue来使用，运行时是没有权限获取文件信息的。

script：

// changeName:子组件watch的 this$emit('changeName', thisprovince)的changeName，是自定义的

// lockValue：父组件的方法名

1父组件向子组件传递数据

(1)$parent方法，在子组件中可以直接访问该组件的父实例或组件。

(2)$root方法，获取根组件对象。

2子组件向父组件传递数据

$children：返回的是所有子组件对象的数组，再通过下标获取指定的子组件。当组件顺序不会发生变化时，用 $children；否则用 $refs。 注意 ：$refs：返回的是一个对象，对象中包含所有带有ref属性的子组件。 注意：不是只有组件才可以添加ref属性，任何标签都可以加ref属性 。

注意 ：在父组件创建完成到挂载完成之间，包含完整的子组件的生命周期。父级组件在mounted生命周期函数内，才能获取到$children信息；在子组件的created生命周期函数中，可以获取到父组件的数据。顺序：父级created => 子级1created => 子级2created => => 子级1mounted => 子级2mounted => 父级mounted

常用的PC端组件库有： element-ui 、 iView 、 ant-design vue

常用的移动端组件库： Vant 、 Mint-ui

注意 ：第三方组件库，必须在Vue的下面引入

效果：

注意 ：非 template/render 模式下，一些组件名在实际使用中需使用 i-小写组件名 格式（例如 Button组件 需使用 i-button）；一些组件标签名需要改成小写（例如 Tabs组件 需使用 tabs ）。具体情况参考官网提示。

效果：

效果：

以上就是关于vue中使用localStorage存储信息全部的内容，包括:vue中使用localStorage存储信息、Vue 如何获取当前vue文件所在的文件夹的名字、vue---父组件监听子组件并获取子组件的值（子组件多个值）等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！