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框的值,再将数据存储到对象里,将对象通过本地存储,存储起来,取出来之后,定义一个空数组,将对象添加到数组里,之后再将数据存储起来

目录
相关文章
|
5月前
|
JavaScript
vue中watch的用法
vue中watch的用法
|
4月前
|
JavaScript
Vue 中mixin 的用法
【10月更文挑战第18天】Vue 中mixin 的用法
54 3
|
4月前
|
缓存 JavaScript Serverless
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
245 0
|
5月前
|
JavaScript 开发者
彻底搞懂 Vue3 中 watch 和 watchEffect是用法
彻底搞懂 Vue3 中 watch 和 watchEffect是用法
|
6月前
|
JavaScript API 对象存储
|
6月前
|
JavaScript 前端开发 程序员
Vue条件语句中v-if、v-else、v-else-if的用法
这篇文章详细介绍了Vue中`v-if`、`v-else`和`v-else-if`条件语句的用法,包括它们的正确使用方式、常见的错误以及如何使用`<template>`标签来同时切换多个元素的显示状态。
|
9月前
|
缓存 JavaScript UED
vue中keep-alive的用法和含义
Vue.js 的 `&lt;keep-alive&gt;` 组件用于缓存不活动的组件实例,避免销毁并优化性能。当组件切换时,状态得以保持。用法是将其作为包裹组件,包含需缓存的组件。例如,在切换 `ComponentA` 和 `ComponentB` 时,利用 `&lt;keep-alive&gt;` 可以在状态间切换而不会丢失信息。此外,结合 `&lt;router-view&gt;` 可缓存路由组件,`include` 和 `exclude` 属性则能指定缓存特定组件,提升应用性能和用户体验。
62 1
|
9月前
|
JavaScript 前端开发
Vue中JSX的基本用法
Vue中JSX的基本用法
88 1
|
9月前
vue3 watch 监听多值以及深度监听用法
vue3 watch 监听多值以及深度监听用法
2227 0
|
9月前
|
JavaScript
Vue Steps步骤组件用法
Vue Steps步骤组件用法
241 0

热门文章

最新文章