Vue.js 如果我刷新我的网页，Vuex存储为空

如果我刷新网页，如何保留我的店铺

    let store = new Vuex.Store( {
    modules: {
        demo, auth
    },
    strict: true
} );


let router = new VueRouter( {
    mode: 'history',
    saveScrollPosition: true,
    routes: routes
} )

我使用历史记录模式，但如果我重新加载我的网页，我的存储是空的。 有解决办法吗

如果你刷新页面（F5），你将重新运行你的应用程序，因此除非你用一些数据初始化存储，否则当应用程序启动时，它将变为空

在这种情况下，您可以决定要保留哪些状态，并将它们保存到cookie/LocalStorage中，然后在

app.js

中将它们从cookie/LocalStorage加载到存储中。这将是常见的做法，如身份验证令牌等，因为您希望在页面刷新的情况下保持用户登录。 Stormpath关于存储代币的文章很好：

如果在您从一条路线导航到另一条路线时重新加载Vuex应用商店和整个应用程序-您的应用程序有问题，可能您没有正确使用VueRouter导航

---

您可以将您的状态缓存到

会话存储

，该存储将在页面（选项卡）刷新事件后保留，但在页面或浏览器关闭时将被清除

---

要在应用程序刷新后保留状态数据，您可以使用

localStorage

或

sessionStorage

XSS：正如您所说，在

localStorage

中存储令牌的问题在于应用程序容易受到XSS（跨站点脚本）攻击。除此之外，它是相当安全的。

localStorage

绑定到域，因此

www.yourapp.com

的数据即使在浏览器关闭后也将保留在域中。与cookies不同，您不必管理发出请求的站点。浏览器上具有相同域的所有选项卡都将能够使用

localStorage

如果不需要上述行为，您可以使用

会话存储

，其工作方式几乎相同，但当浏览器关闭时，数据会被清除

对于Cookie，确保它们有助于保存被XSS拿走的令牌，但您还必须确保提供

csrf令牌

，以防止csrf（跨站点请求伪造）攻击

如果您计划继续使用cookie，那么请确保它们的标题中的

httpOnly

标志设置为true，否则它们就不好

总的来说，我已经看到localStorage是一个非常普遍推荐的用于维护令牌和其他应用程序数据的解决方案

我将添加此答案的来源以供参考

检查已接受的答案以及其他答案

这将让您了解使用localStorage的陷阱和操作方法

---

使用localstorage？例如，localstorage是保存令牌Id的一个不错的解决方案？安全性还不错？不，安全性还不错。保存数据的cookie或localstorage，如果您将令牌id保存在cookie或localstorage中，这是一个错误的做法否？否，您没有其他选择SPA-。饼干是最安全的选择。