客户端存储— Vue.js | vue localstorage使用
您在浏览的是v2.x及更早版本的文档。v3.x的文档在这里[1]。基本的示例客户端存储是快速为一个应用进行性能优化的绝佳方法。通过把数据存储在浏览器中,用户不必每次都向服务器请求获取同一个信息。在你离线时,使用本地存储的数据而不是向远端服务器上请求数据就显得非常有用,甚至在线用户也可以从中获益。客户端存储可以通过这些技术来实现:cookie[2]、LocalStorage[3](更准确地说是“WebStorage”)、IndexedDB[4]和WebSQL[5](这项技术已经被废弃了,你不应该在新项目中使用它)。在这个cookbook的条目中,我们将专注于最简单的存储机...
您在浏览的是 v2.x 及更早版本的文档。v3.x 的文档在这里[1]。
基本的示例客户端存储是快速为一个应用进行性能优化的绝佳方法。通过把数据存储在浏览器中,用户不必每次都向服务器请求获取同一个信息。在你离线时,使用本地存储的数据而不是向远端服务器上请求数据就显得非常有用,甚至在线用户也可以从中获益。客户端存储可以通过这些技术来实现:cookie[2]、Local Storage[3] (更准确地说是“Web Storage”)、IndexedDB[4] 和 WebSQL[5] (这项技术已经被废弃了,你不应该在新项目中使用它)。
在这个 cookbook 的条目中,我们将专注于最简单的存储机制:Local Storage。Local Storage 使用键/值对来存储数据。它仅支持存储简单的值,但也可以通过 JSON 编解码来存储复杂的数据。总的来说,Local Storage 适合存储你希望进行持久化的较小数据集,比如用户偏好设置或表单数据。更大规模和更复杂的数据则适合存储在 IndexedDB 中。
让我们从一个表单的简单示例开始:
<div id="app"> My name is <input v-model="name"> </div>这个示例中的表单字段绑定了一个叫 name 的值。下面是 JavaScript 代码:
const app = new Vue({ el: #app, data: { name: }, mounted() { if (localStorage.name) { this.name = localStorage.name; } }, watch: { name(newName) { localStorage.name = newName; } } });请注意 mounted 和 watch 两个方法。我们使用 mo...
取得本站獨家住宿推薦 15%OFF 訂房優惠
vue中使用localStorage存储信息
vue中使用localStorage存储信息. 一什么是localStorage. JSON.parse()作用是将字符串转化成json数组,JSON.stringfy()作用是将json数组转换成 ...