随着前端应用的发展，越来越多的网站和应用需要在客户端存储数据。传统的解决方法是使用 cookie 或者使用后端存储，但这些方法都有一些缺点。Vue.js 提供了更好的方案来实现客户端存储，并且非常容易集成到 Vue 组件中。
Vue.js 提供了两种来实现客户端存储的方式：localStorage 和 sessionStorage。localStorage 是持久化的存储方式，数据会一直存在客户端，直到用户手动清除。而 sessionStorage 则是会话级别的存储方式，当用户关闭浏览器窗口或者标签页，数据就会被清除。
集成 localStorage
在 Vue.js 中使用 localStorage 很简单，首先我们需要在组件中引入 localStorage 对象。
import localStorage from 'localStorage'
然后我们可以在 Vue 组件中使用 localStorage 对象来存储数据。
localStorage.setItem('key', 'value')我们也可以使用 localStorage 对象来获取存储的数据。
localStorage.getItem('key')如果我们需要删除一个存储的数据，可以使用下面的代码：
localStorage.removeItem('key')集成 sessionStorage
集成 sessionStorage 与集成 localStorage 差不多，首先我们需要在组件中引入 sessionStorage 对象。
import sessionStorage from 'sessionStorage'
然后我们可以在 Vue 组件中使用 sessionStorage 对象来存储数据。
sessionStorage.setItem('key', 'value')我们也可以使用 sessionStorage 对象来获取存储的数据。
sessionStorage.getItem('key')如果我们需要删除一个存储的数据，可以使用下面的代码：
sessionStorage.removeItem('key')在 Vue 组件中使用 localStorage 和 sessionStorage
现在我们已经知道了如何集成 localStorage 和 sessionStorage，下面我们就可以在 Vue 组件中使用它们了。
首先我们需要在组件中引入 localStorage 或者 sessionStorage 对象，然后我们可以使用它们来存储和获取数据。
-- -------------------- ---- -------
------ ------------ ---- --------------
------ -------------- ---- ----------------
------ ------- -
------ -
------ -
------ ----------------------------- -- ------ -------
-
--
-------- -
---------- -
----------------------------- ------ --------
------------------------------- ------ --------
-
-
-在上面的例子中，我们在 data 函数中使用了 localStorage.getItem 来获取存储的数据。如果没有存储的数据，我们就使用默认值 Hello world!。在 methods 中，我们使用了 localStorage.setItem 和 sessionStorage.setItem 来存储数据。
总结
在客户端存储数据是被广泛使用的功能之一。Vue.js 提供了非常方便的方法来集成 localStorage 和 sessionStorage。我们可以在 Vue 组件中使用这些存储方式来存储数据。这些存储方式让我们可以更加高效的处理客户端数据，减少了对后端存储的依赖。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645296e8968c7c53b0720b05