Vue本地存储及用法

简介: Vue本地存储及用法

1.本地存储是什么?

       以文件的方式存储在本地,通过把数据存在浏览器中,用户不必每次都向服务器请求

获取同一个信息。在你离线时,使用本地存储的数据而不是向远端服务器上请求

数据就显得非常有用,甚至在先用户也可以从中获益。客户端存储可以通过这些

技术来实现:cookie、Local、Storage(更准确的说是“Web Storage”)

2.本地存储的应用场景

       localstorage是保存在本地 存储量比较大 而且不会 被销毁,有时候做一些跨域

操作cookie无法使用这个来做 或者缓存一些不需要提交到服务器的数据比如

我有一个弹窗 需要谈一天弹一次这种记录就可以用localstorange  

3.存储的使用

       1 存储数据

               localStorage.setltem('accessToken','Bearer'+response.data.result.accessToken)

       2 取出数据

               ocalStorage.getltem('accessToken')

       3 删除存储数据

               ocalStorage.removeltem('accessToken')

       4 更改数据

               localStorage.setltem('accessToken',更改后  +'response'.data.result.accessToken)

4. 练习用法

       首先是页面布局,通过双向绑定来获取input框的值,再将数据存储到对象里,将对象通过本地存储,存储起来,取出来之后,定义一个空数组,将对象添加到数组里,之后再将数据存储起来

809e20daeed84fde81590f0a181d818f.png


相关文章
|
9月前
|
JavaScript API
uniapp使用Vue3挂载函数到全局
uniapp使用Vue3挂载函数到全局
1033 0
|
6月前
|
JavaScript
【Vue面试题四】、Vue实例挂载的过程中发生了什么?
文章详细分析了Vue实例挂载的过程,包括Vue构造函数的执行、初始化方法`_init`的调用,以及Vue实例从创建到挂载的各个阶段。文章提到了Vue实例初始化过程中的多个关键步骤,如合并选项、初始化数据、事件、生命周期、渲染方法等。同时,还解释了Vue如何处理模板和生成渲染函数,以及如何将虚拟DOM转换为真实DOM并进行页面渲染。最后,文章通过流程图总结了Vue实例挂载的整个过程。
【Vue面试题四】、Vue实例挂载的过程中发生了什么?
|
4月前
|
存储 JSON JavaScript
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
173 0
|
6月前
|
JavaScript API 开发者
另一种写 Vue 的方式
另一种写 Vue 的方式
|
9月前
|
JavaScript
【vue】深入探讨vue中组件间多种传值方式
【vue】深入探讨vue中组件间多种传值方式
【vue】深入探讨vue中组件间多种传值方式
|
9月前
|
JavaScript 前端开发 API
vue与jqyery的区别
vue与jqyery的区别
|
9月前
|
小程序 JavaScript
Vue和小程序的区别
Vue和小程序的区别
|
JavaScript 程序员
vue非单文件组件的使用方法
vue非单文件组件的使用方法
|
9月前
|
存储 JavaScript 前端开发
vue本地存储
vue本地存储
|
JavaScript 前端开发 开发者
【Vue2从入门到精通】详解Vue.js的15种常用指令及其使用场景
Vue.js 是一款流行的前端框架,它通过指令(Directive)实现了对 DOM 元素的控制,使得开发者能够更加方便地管理页面的展示和交互。
159 0
【Vue2从入门到精通】详解Vue.js的15种常用指令及其使用场景