AngularJS 如何将数据保存在本地存储中-JavaScript中文网-JavaScript教程资源分享门户

简介

随着前端开发日渐复杂，越来越多的应用需要在用户的电脑上保存数据。而传统的 cookie 存储已经不再满足需求。本文将详细介绍如何在 AngularJS 应用中使用本地存储来保存用户数据。

HTML5 本地存储 API

HTML5 提供了两种本地存储API：

localStorage: 键值对形式的存储方式，数据会一直存在于客户端，除非被手动删除。
sessionStorage: 与 localStorage 相似，但是数据仅在当前浏览器窗口关闭前有效。

为了使用这些存储技术，我们需要掌握它们的 JavaScript API。下面是一些基础概念和相关API：

存储项(key-value pair)

localStorage 和 sessionStorage 都是基于存储键/值对。可以使用 setItem(key, value) 函数向其中添加新的条目，使用 getItem(key) 来从中读取现有的存储项。

// 将数据存储在 localStorage 中
localStorage.setItem("username", "John");
// 获取存储在 localStorage 中的数据
var username = localStorage.getItem("username");

删除存储项

可以通过 removeItem(key) 函数从存储空间中删除键/值对。

localStorage.removeItem("username");

清空存储空间

可以使用 clear() 函数清空存储空间。

localStorage.clear();

遍历存储项

如果需要遍历本地存储中的所有键值对，可以使用 key() 函数获取所有存储在其中的键，并逐个读取存储值：

// 遍历 localStorage 中的所有键/值对
for (var i = 0; i < localStorage.length; i++) {
  var key = localStorage.key(i);
  var value = localStorage.getItem(key);
  console.log(key + " = " + value);
}

在 AngularJS 应用中使用本地存储

接下来，将介绍如何在 AngularJS 应用中使用本地存储。为此，我们需要使用一个服务(service)。在 AngularJS 中，服务通常用于封装一些可重用的代码。

AngularJS 提供了 $window 和 $localStorage 两个服务，分别用于操作浏览器原生的 window 对象和本地数据存储。$localStorage 是一个第三方模块 angular-local-storage 提供的服务，需要通过 npm 安装和引入。

使用 $localStorage 服务

安装依赖包

npm install angular-local-storage --save

引入模块

angular.module('myApp', ['LocalStorageModule'])

使用 $localStorage 进行数据存储

app.controller('myController', function($scope, $localStorage) {
    // 存储数据
    $localStorage.username = 'John';
    // 读取数据
    $scope.username = $localStorage.username;
});

使用 $window.localStorage 服务

如果不想使用第三方模块，可以直接使用 $window.localStorage 实现本地存储：

app.controller('myController', function($scope, $window) {
    // 存储数据
    $window.localStorage.setItem('username', 'John');
    // 读取数据
    $scope.username = $window.localStorage.getItem('username');
});

总结

在本文中，我们讲解了如何在 AngularJS 应用中实现数据的本地存储。我们学习了基础的 HTML5 存储 API，以及两个常用的 AngularJS 服务（$localStorage 和 $window.localStorage）。通过这些技术，我们可以轻松地在用户电脑上保存数据，实现更好的用户体验。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/651aeccb95b1f8cacd2b52ca

AngularJS 如何将数据保存在本地存储中

简介