如何在重新加载或关闭浏览器后保存页面状态？

要在重新加载或关闭浏览器后保存页面状态，可以使用以下几种方法：

1. 使用本地存储（Local Storage）

本地存储是一种在客户端保存数据的方式，数据不会随着页面关闭而丢失。

基础概念

Local Storage：HTML5 提供的一种持久化存储机制，可以存储键值对数据。
Session Storage：与 Local Storage 类似，但数据仅在当前会话期间有效。

示例代码

// 保存状态
localStorage.setItem('pageState', JSON.stringify({ key: 'value' }));

// 读取状态
const state = JSON.parse(localStorage.getItem('pageState'));

应用场景

用户填写的表单数据。
用户在页面上的个性化设置。

2. 使用 Cookies

Cookies 是一种在客户端保存小量数据的方式，可以在浏览器关闭后仍然保留。

基础概念

Cookies：服务器发送到用户浏览器并保存在用户本地终端上的数据。

示例代码

// 设置 Cookie
document.cookie = "pageState=" + encodeURIComponent(JSON.stringify({ key: 'value' })) + "; path=/";

// 读取 Cookie
const cookies = document.cookie.split(';').map(cookie => cookie.trim());
const stateCookie = cookies.find(cookie => cookie.startsWith('pageState='));
const state = JSON.parse(decodeURIComponent(stateCookie.split('=')[1]));

应用场景

用户登录状态。
购物车信息。

3. 使用 IndexedDB

IndexedDB 是一种在客户端存储大量结构化数据的方式，适合需要复杂查询的应用。

基础概念

IndexedDB：一个事务型数据库系统，用于在浏览器中存储大量结构化数据。

示例代码

// 打开数据库
const request = indexedDB.open('myDatabase', 1);

request.onupgradeneeded = function(event) {
  const db = event.target.result;
  const objectStore = db.createObjectStore('pageState', { keyPath: 'id' });
  objectStore.add({ id: 'state', data: { key: 'value' } });
};

request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(['pageState'], 'readonly');
  const objectStore = transaction.objectStore('pageState');
  const getRequest = objectStore.get('state');

  getRequest.onsuccess = function(event) {
    const state = event.target.result.data;
    console.log(state);
  };
};

应用场景

复杂的应用数据存储。
需要离线访问的应用。

4. 使用 URL 参数或 Hash

通过将状态信息编码到 URL 中，可以在页面刷新后恢复状态。

基础概念

URL 参数：通过 ?key=value 的形式传递数据。
Hash：通过 #key=value 的形式传递数据。

示例代码

// 保存状态到 URL 参数
window.history.pushState({ key: 'value' }, '', '?pageState=' + encodeURIComponent(JSON.stringify({ key: 'value' })));

// 从 URL 参数读取状态
const urlParams = new URLSearchParams(window.location.search);
const state = JSON.parse(decodeURIComponent(urlParams.get('pageState')));