ngStorage 和 $window.localStorage 的区别

Posted 2023-02-22

技术标签:

【中文标题】ngStorage 和 $window.localStorage 的区别【英文标题】：Difference between ngStorage and $window.localStorage 【发布时间】：2016-08-06 06:50:49 【问题描述】：

ngStorage 和 $window.localStorage 有什么区别？什么时候用一个比另一个更好？我必须为 Web 应用程序选择其中之一。我必须保存个人资料用户和令牌的数据

【问题讨论】：

【参考方案1】：

var setLocalStorage = function (token, uname)

$localStorage.token = token;
$localStorage.name = uname;


$timeout(setLocalStorage(token, userForm.uname), 500);

使用的模块：ngStorage

有效！

【讨论】：

【参考方案2】：

这是普通的 html5 本地存储：

使用本地存储，Web 应用程序可以在用户浏览器中本地存储数据。在 html5 之前，应用程序数据必须存储在 cookie 中，包含在每个服务器请求中。本地存储更安全，可以在本地存储大量数据，不影响网站性能。与 cookie 不同，存储限制要大得多（至少 5MB），并且信息永远不会传输到服务器。本地存储是按源（按域和协议）的。来自一个来源的所有页面都可以存储和访问相同的数据。

它为您提供访问存储的对象 - window.localStorage 和 window.sessionStorage

window.localStorage - 存储没有过期日期的数据

window.sessionStorage - 存储一个会话的数据，因此当浏览器选项卡关闭时数据会丢失

要检索数据，您可以这样做

localStorage.getItem("lastname");

因此，如果您想在 Angular 中执行此操作，您可以使用 $window 服务，但它的行为与上面的示例相同。

Source

解决ngStorage：

一个 AngularJS 模块，使 Web 存储以 Angular 方式工作。包含两个服务：$localStorage 和 $sessionStorage。无需像在 $window 服务中那样处理 getter 和 setter

你可以在$scope下通过引用传递$localStorage或$sessionStorage：

$scope.$storage = $localStorage;

然后你可以使用 $storage as 和其他角度变量

<body ng-controller="Ctrl">
    <button ng-click="$storage.counter = $storage.counter + 1">$storage.counter</button>
</body>

Source

如果您将在您的 web 应用程序中使用 angularjs，我会使用 ngStorage，因为您会更加熟悉和熟悉语法。不过这只是我的看法。

【讨论】：

【参考方案3】：

请注意，ngStorage 在内部使用 Angular 监视来监视对 $storage/$localStorage 对象的更改，即需要一个摘要循环来将您的新值可靠地保存到浏览器的本地存储中。通常不是问题，但如果您在$localStorage 中存储一个值并打开一个新选项卡而不发生摘要循环，您可能无法在新打开的选项卡/窗口中看到存储的值。

在 IE 上遇到这个问题，不得不使用 window.localStorage 来解决它。

【讨论】：

【参考方案4】：

变量$window 通常是全局变量window。 Angular 推荐使用 $window 的原因是因为有时您想模拟或替换“真实的”window 对象（例如，出于测试目的）。

这么说，使用$window.localStorage表示你使用的是Local Storage的vanilla API，而ngStorage是