【问题标题】：Store root scope data in browser local/ session storage and load after page reload将根范围数据存储在浏览器本地/会话存储中并在页面重新加载后加载
【发布时间】：2017-02-14 07:40:47
【问题描述】：
团队，我们已经实现了一个单页面应用程序，我们将一些数据存储在根范围内，以便在应用程序的其他页面中访问。在正常流程中一切正常。我们在浏览器刷新时遇到了问题。当用户在我们的一个应用程序页面中时，如果用户刷新页面，整个数据将从根范围丢失。我们尝试不允许刷新。但是，我们发现这是不可能的，甚至无法添加自定义消息来通知用户。现在，我们只是在用户刷新页面时注销用户，这对用户来说很尴尬，而且我们的应用程序也不需要那么多安全性。因此，我们正在考虑在刷新页面时将整个根范围数据添加到本地存储中，并且在重新加载页面后，我们将再次将整个数据从本地/会话存储数据加载到根范围。我们必须在一个地方这样做。因此，我们不必在单个模块页面上实现这一点。
有没有办法做到这一点。任何人都可以建议是否有其他方法。
【问题讨论】：
标签：
javascript
jquery
angularjs
browser
browser-cache
【解决方案1】：
请注意，HTML5 本地存储只有 800kb-10mb，具体取决于浏览器。我听说 Safari 有 99 idk。在最新的 Google Chrome (2/14/17) 中为 5mb。
无论如何，您可以通过字符串化为 JSON 来创建本地存储：
localStorage.setItem('myDataStorage', JSON.stringify(myData));
然后检索它们
var myRetrievedData = JSON.parse(localStorage.getItem('myDataStorage'));
myDataStorage 是您创建的本地存储的名称。如果愿意，您可以使用不同的名称来创建多个 localStorage，但请注意，每个本地存储仅在大小上有所限制。不要指望使用 HTML 本地存储来保存高清图像更少的视频
完成后，您的代码现在可以使用变量 myRetrievedData（或您想要的任何变量名称）来操作您检索到的数据