本地数据读写(Web Storage API) - 网络统计学(7) - 技术文章

在现代网页开发中，除了使用 Cookies 之外，还可以使用 Web Storage API (包括 LocalStorage 和 SessionStorage) 来在浏览器中存储数据。这些 API 提供了更灵活和更强大的数据存储选项。

1、Web Storage API介绍

Web Storage API 包括 LocalStorage 和 SessionStorage：

LocalStorage：用于持久化存储数据，除非被主动删除，否则数据会一直存在。
SessionStorage：用于存储会话数据，当页面会话结束（例如浏览器标签关闭）时，数据会被删除。

I、LocalStorage 示例

写入数据：

// 将数据存储在 LocalStorage 中
localStorage.setItem("username", "JohnDoe");

读取数据：

// 从 LocalStorage 中读取数据
let username = localStorage.getItem("username");
console.log(username); // 输出 'JohnDoe'

删除指定数据：

// 从 LocalStorage 中删除数据
localStorage.removeItem("username");

清除所有数据：

// 清除所有 LocalStorage 中的数据
localStorage.clear();

注：localStorage.clear()是一个用于清除localStorage中所有数据的方法。通过调用这个方法，可以一次性删除localStorage中存储的所有数据，但在使用之前应确保这是必要的操作，因为一旦数据被清除，就无法恢复

II、SessionStorage 示例

写入数据：

// 将数据存储在 SessionStorage 中
sessionStorage.setItem("sessionKey", "12345");

读取数据：

// 从 SessionStorage 中读取数据
let sessionKey = sessionStorage.getItem("sessionKey");
console.log(sessionKey); // 输出 '12345'

删除指定数据：

// 从 SessionStorage 中删除数据
sessionStorage.removeItem("sessionKey");

清除所有数据：

// 清除所有 SessionStorage 中的数据
sessionStorage.clear();

2、网页中运用LocalStorage

下面是一个完整的示例代码，展示如何使用 LocalStorage 来存储和读取数据：

<!DOCTYPE html>
<html>
<head>
    <title>LocalStorage 示例</title>
    <script type="text/javascript">
        // 设置数据到 LocalStorage
        function setLocalStorage() {
            localStorage.setItem("username", "JohnDoe");
            alert("数据已写入 LocalStorage");
        }
        // 从 LocalStorage 读取数据
        function getLocalStorage() {
            let username = localStorage.getItem("username");
            if (username) {
                alert("从 LocalStorage 读取的数据: " + username);
            } else {
                alert("未找到数据");
            }
        }
        // 删除 LocalStorage 中的数据
        function removeLocalStorage() {
            localStorage.removeItem("username");
            alert("数据已从 LocalStorage 删除");
        }
        // 清除所有 LocalStorage 数据
        function clearLocalStorage() {
            localStorage.clear();
            alert("所有 LocalStorage 数据已清除");
        }
    </script>
</head>
<body>
    <button onclick="setLocalStorage()">写入数据到 LocalStorage</button>
    <button onclick="getLocalStorage()">读取数据从 LocalStorage</button>
    <button onclick="removeLocalStorage()">删除 LocalStorage 中的数据</button>
    <button onclick="clearLocalStorage()">清除所有 LocalStorage 数据</button>
</body>
</html>

这个示例通过按钮演示了如何使用 LocalStorage 来写入、读取、删除和清除数据，SessionStorage使用方法类似。

3、Web Storage API用途

LocalStorage 和 SessionStorage 是 HTML5 提供的两种本地存储机制，它们与 Cookies 有一些相似之处，但也有许多不同之处。下面是关于 LocalStorage 和 SessionStorage 的详细介绍，以及它们与 Cookies 的比较。

I、LocalStorage的用途

持久化存储：数据存储在 LocalStorage 中，除非被主动删除，否则数据会一直存在，即使浏览器关闭后也不会丢失。
存储容量：一般情况下，每个域名下可以存储约 5MB 的数据。
典型用途：存储用户偏好设置（如主题、语言选择）存储不需要频繁更改的静态数据（如应用配置）存储用户数据缓存（如离线数据）

II、SessionStorage的用途

会话存储：数据仅在页面会话期间存在。当会话结束（例如浏览器标签关闭）时，数据会被删除。
存储容量：与 LocalStorage 相同，一般为每个域名 5MB。
典型用途：a. 存储临时数据（如表单数据）； b. 存储页面间共享的数据； c. 确保数据在浏览器标签关闭后不会保留。

4、Web Storage API 与 Cookies 的比较

I、数据存储位置

Cookies：数据存储在浏览器和服务器之间传递，数据会被包含在每个 HTTP 请求中，这样可以让服务器读取。
LocalStorage 和 SessionStorage：数据只存储在浏览器中，不会随 HTTP 请求发送到服务器。

II、数据生命周期

Cookies：可以设置过期时间（expires 属性）或最大存储时间（max-age 属性），数据可以持久存在或者会话结束后删除。
LocalStorage：数据持久存在，除非被显式删除。
SessionStorage：数据在会话期间存在，当会话结束（如标签页关闭）时，数据被删除。

III、数据容量

Cookies：容量限制较小，每个 Cookie 的大小限制通常为 4KB，并且每个域名下的 Cookie 总容量也有限。
LocalStorage 和 SessionStorage：容量更大，每个域名下通常可以存储约 5MB 的数据。

IV、安全性

Cookies：可以设置 HttpOnly 和 Secure 属性来增强安全性，但仍然容易受到一些攻击（如 XSS 和 CSRF）。
LocalStorage 和 SessionStorage：只能通过 JavaScript 访问，不能通过服务器端脚本直接访问，且没有 HttpOnly 属性保护，容易受到 XSS 攻击。

V、数据读写

Cookies：每次 HTTP 请求都会包含 Cookie 数据，可能影响网络性能。
LocalStorage 和 SessionStorage：仅在客户端读写数据，不影响网络性能。

在选择存储方式时，可以考虑以下几点：

Cookies：适用于与服务器通信或管理会话状态，例如存储用户登录状态、CSRF 令牌等。
LocalStorage：适用于长期存储大量数据，并且这些数据在客户端使用，例如存储用户偏好设置、应用配置等。
SessionStorage：适用于在一个浏览器会话中存储数据，并且不希望数据在会话结束后保留，例如存储临时表单数据、页面间共享的数据等。

LocalStorage 和 SessionStorage 提供了更大的存储容量和更快的访问速度，并且不会随每个请求发送到服务器，因此更适合存储大量的客户端数据和临时数据。而 Cookies 仍然是管理会话和服务器端数据的关键工具。根据具体的使用场景选择合适的存储机制，可以提高应用的性能和安全性。

5、本地数据管理（LocalStorage）

localStorage是域内安全的，即localStorage是基于域的。任何在该域内的所有页面，都可以访问localStorage数据。但仍然存在一个问题，就是各个浏览器厂商的浏览器之间的数据是各自独立的。也就是说，如果在firefox中使用localstorage存储一组数据，在chrome浏览器下是无法读取的。同样，由于localStorage数据是保存在用户的设备中的，因此同一个应用程序在不同设备上保存的数据是不同的。

每个人（包括厂商）都有自己独特的文件命名规则或习惯，目的是为了方便文件的查询。由于localStorage数据被保存在系统指定的固定空间，而不是自定义的文件夹中，且由不同网页设计者创建，所以localStorage数据文件命名显得非常重要。命名规则如下：

命名要有自己的独特名称标记。

笔者的文件命名习惯是*_lei，如test_lei、book_lei，每个本地数据文件名都以"_lei"结尾。这里"_lei"为用户命名标记，在数据操作台中输入您的命名标记，然后运行“筛选键值”，本地数据键值列表中就都是自己的数据了。

必要时命名要反映出数据主题；
必要时命名要反映出数据创建时间；
采用下划线“_"分割名称，创建分层（级）命名；
尽量不要用中文命名。

localStorage方法（按键值名称操作本地数据）代码示例：

var info={name:'Lee', age:20, id:'001'};           //定义JSON对象
var oStr=JSON.stringify(info);                     //将JSON对象转换为JSON字符串
localStorage.setItem('jsonTest1_lei',oStr);        //将JSON字符串按命名存储在本地
var oData=localStorage.getItem('jsonTest1_lei')    //按命名获取本地数据（字符串）并赋值
webTJ.display(oData,0);
var oJSON=JSON.parse(oData);                       //JSON字符串转换为JSON对象
webTJ.display(oJSON.name,0);                       //显示JSON对象的name属性值
localStorage.removeItem('jsonTest1_lei');          //按命名删除本地数据（字符串）
webTJ.display(localStorage.getItem('jsonTest1_lei'),0);

统计学网页通过命名规则，支持将 LocalStorage 以 JSON 或格式化文本格式进行读写操作。

网站首页 > 技术文章正文

本地数据读写(Web Storage API) - 网络统计学(7)

猜你喜欢

网站首页 > 技术文章 正文

本地数据读写(Web Storage API) - 网络统计学(7)

猜你喜欢

网站首页 > 技术文章正文