客户端存储

客户端存储

基本示例客户端存储是快速提高应用程序性能的绝佳方法。通过将数据存储在浏览器本身，您可以跳过每次用户需要数据时从服务器获取信息。虽然在离线时特别有用，但即使在线用户也会从使用本地数据而不是远程服务器中受益。客户端存储可以使用 cookie、本地存储（技术上称为“Web 存储”）、IndexedDB 和 WebSQL（一种不应在新的项目中使用的已弃用方法）。

在本菜谱条目中，我们将重点介绍本地存储，它是存储机制中最简单的。本地存储使用键值系统来存储数据。它仅限于存储简单的值，但如果您愿意使用 JSON 对值进行编码和解码，则可以存储复杂数据。通常，本地存储适用于您想要持久化的小型数据集，例如用户偏好或表单数据。具有更复杂存储需求的更大数据通常最好存储在 IndexedDB 中。

让我们从一个简单的基于表单的示例开始

此示例有一个绑定到名为 name 的 Vue 值的表单字段。以下是 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 部分。我们使用 mounted 来处理从 localStorage 加载值。为了处理数据写入，我们观察 name 值，并在更改时立即写入它。

您可以在此处自己运行它

查看 CodePen 上 Raymond Camden (@cfjedimaster) 的 测试本地存储。

在表单中输入一些内容，然后重新加载此页面。您会注意到您之前输入的值会自动显示。不要忘记您的浏览器提供了出色的开发者工具来检查客户端存储。以下是在 Firefox 中的示例以下是 Chrome 中的示例最后，以下是 Microsoft Edge 中的示例。请注意，您可以在“调试器”选项卡下找到应用程序存储值。顺便说一句，这些开发者工具还为您提供了一种删除存储值的方法。这在测试时非常有用。

立即写入值可能不可取。让我们考虑一个稍微高级的示例。首先，更新后的表单。

现在我们有两个字段（同样，绑定到 Vue 实例），但现在还添加了一个运行 persist 方法的按钮。让我们看一下 JavaScript 代码。

const app = new Vue({ el: '#app', data: { name: '', age: 0 }, mounted() { if (localStorage.name) { this.name = localStorage.name; } if (localStorage.age) { this.age = localStorage.age; } }, methods: { persist() { localStorage.name = this.name; localStorage.age = this.age; console.log('now pretend I did more stuff...'); } }})

与之前一样，mounted 用于加载持久化数据（如果存在）。但是，这次只有在单击按钮时才会持久化数据。我们也可以在这里进行任何验证或转换，然后再存储值。您还可以存储一个表示值存储时间的日期。使用这些元数据，mounted 方法可以对是否再次存储值进行逻辑调用。您可以在下面尝试此版本。

查看 CodePen 上 Raymond Camden (@cfjedimaster) 的 测试本地存储 2。

处理复杂值如上所述，本地存储仅适用于简单值。要存储更复杂的值，例如对象或数组，您必须使用 JSON 对值进行序列化和反序列化。以下是一个更高级的示例，它持久化了一个猫数组（最好的数组类型）。

此“应用程序”包含一个简单的顶部列表（带有删除猫的按钮）和一个底部的小表单，用于添加新猫。现在让我们看一下 JavaScript 代码。

const app = new Vue({ el: '#app', data: { cats: [], newCat: null }, mounted() { if (localStorage.getItem('cats')) { try { this.cats = JSON.parse(localStorage.getItem('cats')); } catch(e) { localStorage.removeItem('cats'); } } }, methods: { addCat() { // ensure they actually typed something if (!this.newCat) { return; } this.cats.push(this.newCat); this.newCat = ''; this.saveCats(); }, removeCat(x) { this.cats.splice(x, 1); this.saveCats(); }, saveCats() { const parsed = JSON.stringify(this.cats); localStorage.setItem('cats', parsed); } }})

在此应用程序中，我们已切换为使用本地存储 API 而不是“直接”访问。两者都有效，但 API 方法通常更受欢迎。mounted 现在必须获取值并解析 JSON 值。如果这里出现任何错误，我们假设数据已损坏并将其删除。（请记住，无论何时您的 Web 应用程序使用客户端存储，用户都可以访问它并随意修改它。）

我们现在有三种方法来处理猫。addCat 和 removeCat 都处理更新存储在 this.cats 中的“实时”Vue 数据。然后，它们运行 saveCats，它处理序列化和持久化数据。您可以在下面玩这个版本

查看 CodePen 上 Raymond Camden (@cfjedimaster) 的 本地存储，复杂。

替代模式虽然本地存储 API 相对简单，但它缺少许多应用程序中会很有用的某些基本功能。以下插件包装了本地存储访问，使其更易于使用，同时还添加了默认值等功能。

vue-local-storage

vue-reactive-storage

vue2-storage

总结虽然浏览器永远无法取代服务器持久化系统，但拥有多种在本地缓存数据的方法可以极大地提高应用程序的性能，并且在 Vue.js 中使用它使其更加强大。

发现错误或想为文档做出贡献？ 在 GitHub 上编辑！ 部署在 Netlify 上。