38、JavaScript 客户端存储与应用拓展

JavaScript 客户端存储与应用拓展

在前端开发中，数据的持久化存储是一个重要的话题。不同的存储方式适用于不同的场景，下面将详细介绍几种常见的客户端存储方法。

1. 旧示例的修改

在之前的示例中， functionOne 需要进行修改，添加以下样式设置：

square.style.position = "relative";
square.style.left = "0";

原因是与示例 8 - 2 不同，新的状态方法和事件处理程序实际上会保留页面内的状态。这意味着从步骤一到步骤二所做的更改（将位置设置为绝对定位并移动 div 元素）必须在第一个函数中取消，才能真正恢复页面状态。

2. 使用 sessionStorage 进行客户端存储

2.1 问题描述

你希望轻松存储会话信息，而不会遇到与 cookie 相关的大小和跨页面污染问题，并且防止在浏览器刷新时丢失信息。

2.2 解决方案

使用新的 DOM 存储 sessionStorage 功能：

sessionStorage.setItem("name", "Shelley");
sessionStorage.city = "St. Louis";
// 获取数据
var name = sessionStorage.getItem("name");
v