使用JavaScript操作本地存储_Javascript

本地存储：localstorage 和 sessionstorage

在 javascript 中，localstorage 和 sessionstorage 都是 web storage api 的一部分，用于在浏览器中存储数据。它们之间的主要区别是：

localstorage：数据持久存储，即使浏览器关闭，数据依然存在。
sessionstorage：数据仅在当前会话中存在，当浏览器窗口或标签页关闭时，数据会被清除。

这两者都可以存储字符串类型的数据，但可以通过 json 序列化（json.stringify）和反序列化（json.parse）存储和读取对象、数组等复杂数据结构。

基本使用方法

1. localstorage 示例

设置数据：

localstorage.setitem('username', 'johndoe');
localstorage.setitem('age', '30');

获取数据：

const username = localstorage.getitem('username'); // 'johndoe'
const age = localstorage.getitem('age'); // '30'

删除数据：

localstorage.removeitem('username');

清空所有数据：

localstorage.clear();

数据持久性：

当你关闭浏览器并重新打开它时，localstorage 中的数据依然存在。你可以在后续的页面访问中读取这些数据。

2. sessionstorage 示例

设置数据：

sessionstorage.setitem('username', 'janedoe');
sessionstorage.setitem('age', '25');

获取数据：

const username = sessionstorage.getitem('username'); // 'janedoe'
const age = sessionstorage.getitem('age'); // '25'

删除数据：

sessionstorage.removeitem('username');

清空所有数据：

sessionstorage.clear();

数据生命周期：

sessionstorage 中的数据仅在当前会话期间有效。关闭浏览器标签页或窗口时，数据会被清除。

实际项目中的应用

我们可以将本地存储用于各种应用场景，例如用户身份验证、用户设置或购物车状态存储等。

示例 1：用户登录状态管理

假设你正在开发一个简单的登录页面，当用户成功登录时，将用户名和身份标识存储在 localstorage 中，后续页面可以读取这些数据来判断用户是否已经登录。

html（登录页面）：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>login</title>
</head>
<body>
  <h1>login</h1>
  <form id="loginform">
    <input type="text" id="username" placeholder="username" required>
    <input type="password" id="password" placeholder="password" required>
    <button type="submit">login</button>
  </form>
  
  <script src="login.js"></script>
</body>
</html>

javascript（login.js）：

document.getelementbyid('loginform').addeventlistener('submit', function(event) {
  event.preventdefault();
  
  const username = document.getelementbyid('username').value;
  const password = document.getelementbyid('password').value;

  // 假设进行简单的用户名和密码验证
  if (username === 'admin' && password === '1234') {
    // 登录成功，存储登录信息到 localstorage
    localstorage.setitem('username', username);
    localstorage.setitem('isloggedin', 'true');
    alert('login successful!');
    
    // 跳转到欢迎页面
    window.location.href = 'welcome.html';
  } else {
    alert('invalid credentials');
  }
});

欢迎页面（welcome.html）：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>welcome</title>
</head>
<body>
  <h1>welcome</h1>
  <p id="welcomemessage"></p>
  
  <script src="welcome.js"></script>
</body>
</html>

javascript（welcome.js）：

// 在欢迎页面加载时，检查用户是否已登录
window.onload = function() {
  const isloggedin = localstorage.getitem('isloggedin');
  const username = localstorage.getitem('username');
  
  if (isloggedin === 'true' && username) {
    document.getelementbyid('welcomemessage').textcontent = `welcome, ${username}!`;
  } else {
    alert('you are not logged in');
    window.location.href = 'login.html';
  }
};

解释：

登录页面：用户输入用户名和密码进行登录，如果验证成功，将用户名和登录状态存储到 localstorage 中。

欢迎页面：当用户访问欢迎页面时，首先检查 localstorage 中是否存储了登录信息，如果有，则显示欢迎信息；否则，跳转到登录页面。

示例 2：实现一个简单的购物车功能

在电商网站中，可以使用 localstorage 来存储用户的购物车内容，确保在用户关闭浏览器后仍能保存购物车的状态。

html（购物车页面）：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>shopping cart</title>
</head>
<body>
  <h1>your shopping cart</h1>
  <div id="cartitems"></div>
  <button id="clearcart">clear cart</button>
  
  <script src="cart.js"></script>
</body>
</html>

javascript（cart.js）：

// 添加商品到购物车
function addtocart(product) {
  let cart = json.parse(localstorage.getitem('cart')) || [];
  cart.push(product);
  localstorage.setitem('cart', json.stringify(cart));
}

// 渲染购物车内容
function rendercart() {
  const cart = json.parse(localstorage.getitem('cart')) || [];
  const cartitemscontainer = document.getelementbyid('cartitems');
  
  if (cart.length === 0) {
    cartitemscontainer.innerhtml = 'your cart is empty.';
  } else {
    cartitemscontainer.innerhtml = cart.map(item => `<p>${item.name} - $${item.price}</p>`).join('');
  }
}

// 清空购物车
document.getelementbyid('clearcart').addeventlistener('click', function() {
  localstorage.removeitem('cart');
  rendercart();
});

// 页面加载时渲染购物车
window.onload = rendercart;

// 示例：添加一些商品到购物车
addtocart({ name: 'laptop', price: 999 });
addtocart({ name: 'headphones', price: 199 });

解释：

购物车功能：通过 localstorage 存储购物车中的商品列表（使用 json.stringify 存储数组，使用 json.parse 读取）。

页面加载时：当页面加载时，检查 localstorage 中是否有购物车数据，并渲染到页面上。

清空购物车：点击“清空购物车”按钮时，删除 localstorage 中的购物车数据，并刷新页面。