$window.sessionStorage 与 $cookieStore

客户端

使用 $window.sessionStorage 与 $cookieStore 进行存储和管理数据是在前端开发中常见的做法。这两个对象提供了一种简单而有效的方式来存储和获取数据，以便在不同的页面或会话之间进行共享和保持状态。本文将介绍这两个对象的用法，并通过案例代码来展示它们的具体应用。

使用 $window.sessionStorage 进行数据存储

$window.sessionStorage 是 HTML5 提供的一种用于在客户端存储数据的 API。它使用键值对的方式来存储数据，并且在同一会话期间一直有效，即在同一浏览器窗口或标签页中。当会话结束后，这些数据将会被清除。

使用 $window.sessionStorage 存储数据非常简单。我们可以使用 setItem() 方法来添加数据，使用 getItem() 方法来获取数据，使用 removeItem() 方法来删除数据。下面是一个例子：

// 存储数据
$window.sessionStorage.setItem('username', 'John');
$window.sessionStorage.setItem('age', '25');
// 获取数据
var username = $window.sessionStorage.getItem('username');
var age = $window.sessionStorage.getItem('age');
console.log(username); // 输出：John
console.log(age); // 输出：25
// 删除数据
$window.sessionStorage.removeItem('age');

使用 $cookieStore 进行数据存储

$cookieStore 是 AngularJS 提供的一个服务，它可以用于在客户端存储数据。与 $window.sessionStorage 不同的是，$cookieStore 存储的数据在不同的会话之间也是有效的，即在不同的浏览器窗口或标签页中都可以访问到。

$cookieStore 的用法与 $window.sessionStorage 类似。我们可以使用 put() 方法来添加数据，使用 get() 方法来获取数据，使用 remove() 方法来删除数据。下面是一个例子：

// 存储数据
$cookieStore.put('username', 'John');
$cookieStore.put('age', '25');
// 获取数据
var username = $cookieStore.get('username');
var age = $cookieStore.get('age');
console.log(username); // 输出：John
console.log(age); // 输出：25
// 删除数据
$cookieStore.remove('age');

使用 $window.sessionStorage 与 $cookieStore 的区别

$window.sessionStorage 和 $cookieStore 都是用于在客户端存储数据的工具，但它们之间有一些明显的区别。

1. 存储方式不同：$window.sessionStorage 使用的是键值对的方式存储数据，而 $cookieStore 使用的是 cookie 的方式存储数据。

2. 存储周期不同：$window.sessionStorage 存储的数据在同一会话期间有效，而 $cookieStore 存储的数据在不同的会话之间也是有效的。

3. 存储容量不同：$window.sessionStorage 的存储容量通常比较大，可以存储较大的数据量，而 $cookieStore 的存储容量较小，通常只能存储几千字节的数据。

4. 安全性不同：$window.sessionStorage 存储的数据相对来说比较安全，因为它只存在于客户端，并且在会话结束后会被清除，而 $cookieStore 存储的数据存在于 cookie 中，可能会被窃取或篡改。

案例代码

下面是一个使用 $window.sessionStorage 和 $cookieStore 的案例代码，用于实现用户登录和注销的功能：

Javascript
// 登录
$scope.login = function() {
  // 验证用户名和密码
  if ($scope.username === 'admin' && $scope.password === '123456') {
    // 存储用户信息
    $window.sessionStorage.setItem('username', $scope.username);
    $cookieStore.put('isLoggedIn', true);
    // 跳转到首页
    $location.path('/home');
  } else {
    $scope.error = '用户名或密码错误';
  }
};
// 注销
$scope.logout = function() {
  // 清除用户信息
  $window.sessionStorage.removeItem('username');
  $cookieStore.remove('isLoggedIn');
  // 跳转到登录页
  $location.path('/login');
};
// 检查用户是否登录
$scope.isLoggedIn = function() {
  return $cookieStore.get('isLoggedIn');
};

在这个案例中，我们使用 $window.sessionStorage 存储了用户的用户名，使用 $cookieStore 存储了用户是否登录的状态。在登录时，我们将用户名存储到 $window.sessionStorage 中，并将登录状态存储到 $cookieStore 中。在注销时，我们分别删除这些数据。在检查用户是否登录时，我们使用 $cookieStore 来获取登录状态。

$window.sessionStorage 和 $cookieStore 是前端开发中常用的工具，用于在客户端存储和管理数据。$window.sessionStorage 适用于在同一会话期间共享数据，$cookieStore 适用于在不同的会话之间共享数据。它们的用法类似，都提供了存储和获取数据的方法。在实际应用中，我们可以根据需求选择合适的存储方式来管理数据。