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


相关文章
|
JSON 数据格式
【异常】com.alibaba.fastjson.JSONException: unclosed string : U
【异常】com.alibaba.fastjson.JSONException: unclosed string : U
2615 0
|
JavaScript 前端开发 数据安全/隐私保护
Vue封装组件并发布到npm仓库
前言 使用Vue框架进行开发,组件封装是一个很常规的操作。一个封装好的组件可以在项目的任意地方使用,甚至我们可以直接从npm仓库下载别人封装好的组件来进行使用,比如iview、element-ui这一类的组件库。但是每个公司的业务场景可能不同,开发人员还是得必须封装自己得组件,如果换了一个项目,那么我们就只能复制组件代码到新的项目里面去了,这样稍显麻烦,其实我们可以将组建上传到npm仓库,要用的时候可以直接从npm安装使用。 总结下来有两点好处: 方面使用,任何项目无缝衔接。 可作为开源项目,积累经验。
861 0
Vue封装组件并发布到npm仓库
|
12月前
|
消息中间件 前端开发 JavaScript
探索JavaScript中的事件循环机制:异步编程的核心
【10月更文挑战第12天】探索JavaScript中的事件循环机制:异步编程的核心
220 1
|
12月前
|
JavaScript 前端开发 应用服务中间件
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
403 0
|
前端开发 JavaScript
【Web 前端】ES6新增的内容有哪些?
【5月更文挑战第1天】【Web 前端】ES6新增的内容有哪些?
【Web 前端】ES6新增的内容有哪些?
输入子系统一(输入子系统工作原理)
输入子系统一(输入子系统工作原理)
215 0
|
机器学习/深度学习 数据采集 算法
深入理解VGG网络,清晰易懂
深入理解VGG网络,清晰易懂
|
前端开发 JavaScript 搜索推荐
单页面应用与多页面应用的区别?
单页面应用与多页面应用的区别?
137 0
|
缓存 关系型数据库 MySQL
MySQL登录时出现Access denied for user ‘root‘@‘localhost‘ (using password: YES)无法打开的解决方法
MySQL登录时出现Access denied for user ‘root‘@‘localhost‘ (using password: YES)无法打开的解决方法
22578 0
|
机器学习/深度学习 存储 算法
机器学习中不平衡数据集分类模型示例:乳腺钼靶微钙化摄影数据集(二)
机器学习中不平衡数据集分类模型示例:乳腺钼靶微钙化摄影数据集(二)
329 0
机器学习中不平衡数据集分类模型示例:乳腺钼靶微钙化摄影数据集(二)