AngularJS 中如何使用 LocalStorage

在前端开发中，我们经常需要在不同页面或者不同会话中存储和读取数据。而 HTML5 提供的 LocalStorage 就是一种非常方便的存储方式，它可以在浏览器中本地存储数据，并且不会随着页面的刷新或者关闭而丢失。

在 AngularJS 中，我们可以使用 $window.localStorage 服务来访问 LocalStorage，并且可以将其封装成一个自定义的服务，以便在整个应用程序中重复使用。

使用 $window.localStorage

$window.localStorage 是一个 AngularJS 内置的服务，它是对浏览器原生的 LocalStorage 的封装。我们可以使用 $window.localStorage 来读取和写入 LocalStorage 中的数据。

写入数据

我们可以使用 $window.localStorage.setItem(key, value) 方法来将数据写入 LocalStorage 中，其中 key 是数据的键名，value 是数据的值。例如：

$window.localStorage.setItem('username', 'John');

读取数据

我们可以使用 $window.localStorage.getItem(key) 方法来读取 LocalStorage 中的数据，其中 key 是数据的键名。例如：

var username = $window.localStorage.getItem('username');
console.log(username); // 输出 'John'

删除数据

我们可以使用 $window.localStorage.removeItem(key) 方法来删除 LocalStorage 中的数据，其中 key 是数据的键名。例如：

$window.localStorage.removeItem('username');

创建自定义服务

为了方便重复使用 LocalStorage，我们可以将其封装成一个自定义的服务。下面是一个示例代码：

// javascriptcn.com 代码示例
angular.module('myApp').factory('LocalStorageService', function($window) {
  return {
    get: function(key) {
      return $window.localStorage.getItem(key);
    },
    set: function(key, value) {
      $window.localStorage.setItem(key, value);
    },
    remove: function(key) {
      $window.localStorage.removeItem(key);
    }
  };
});

在上面的代码中，我们创建了一个名为 LocalStorageService 的服务，它依赖于 $window 和 localStorage。该服务包含了 get、set 和 remove 三个方法，分别用于读取、写入和删除 LocalStorage 中的数据。

现在我们可以在整个应用程序中使用 LocalStorageService 来读写 LocalStorage 中的数据了。例如：

// javascriptcn.com 代码示例
angular.module('myApp').controller('MyCtrl', function(LocalStorageService) {
  // 读取数据
  var username = LocalStorageService.get('username');
  console.log(username); // 输出 'John'
  
  // 写入数据
  LocalStorageService.set('username', 'Jane');
  
  // 删除数据
  LocalStorageService.remove('username');
});

总结

在本文中，我们介绍了如何在 AngularJS 中使用 LocalStorage。我们可以使用 $window.localStorage 来访问 LocalStorage，并且可以将其封装成一个自定义的服务，以便在整个应用程序中重复使用。使用 LocalStorage 可以方便地在不同页面或者不同会话中存储和读取数据，使得我们的应用程序更加灵活和易用。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65730c2dd2f5e1655dc2da83