Web Storage

最新推荐文章于 2024-11-03 10:26:49 发布

柳枝.

最新推荐文章于 2024-11-03 10:26:49 发布

阅读量74

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_72527416/article/details/128413043

版权

Web Storage 简介

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足日益更新的需求，会经常性地在设备上存储本地数据，例如记录历史活动信息。传统方式使用 document.cookie 来进行存储，但是由于其存储的空间只有 4KB 左右，并且需要复杂的操作进行解析，给发开者带来诸多不便。

为此，HTML5 规范提出了本地存储的解决方案。

HTML5 的本地存储解决方案中定义了两个重要的API：Web Storage 和本地数据库 Web SQL Database。接下来我们将重点讲述 Web Storage 的基本用法。

localStorage：用于长久保存整个网站的数据，保存的数据没有期限，直到手动去除。
sessionStorage：用于临时保存同一窗口（或标签页）的数据，在关闭窗口（或标签页）之后将会删除这些数据。

Web Storage 的特点

设置数据和读取数据比较方便。
容量较大，sessionStorage 约 5M，localStorage 约 20M。
只能存储字符串，如果要存储 JSON 对象，可以使用 window.JSON 对象的 stringify() 方法和 parse() 方法进行序列化和反序列化。

localStorage 的使用

localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

不管是 localStorage，还是 sessionStorage，可使用的 API 方法和属性都相同：

方法和属性	描述
setItem(key, value)	该方法接收一个键名和值作为参数，将会把键值对添加到存储中，如果键名已存在，则更新其对应的值。
getItem(key)	该方法接收一个键名作为参数，返回键名对应的值。
removeItem(key)	该方法接收一个键名作为参数，并把该键名和值从存储中删除。
length	类似数组的 length 属性，用于访问 Storage 对象中 item 的数量。
key(n)	用于访问第 n 个 key 的名称。
clear()	清除当前域下的所有键值对。

sessionStorage 的使用

sessionStorage 方法针对一个 session（会话）进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

简单的网站列表程序

功能需求：

可以输入网站名、网址，以网站名作为 key 存入 localStorage；
可以输入网站名，查找网址；
可以列出当前已保存的所有网站。

示例代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>简单的网站列表程序</title>
        <style>
            .box {
                width: 300px;
                padding: 15px 20px;
                border: 1px dotted #cccccc;
                margin: 20px 0;
            }
            
            table {
                border-collapse: collapse;
            }
            
            table td {
                padding: 4px 8px;
                border: 1px solid #cccccc;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div>
                名称：<input type="text" id="input-name" value="" placeholder="请输入名称" />
            </div>
            <div>
                网址：<input type="text" id="input-site" value="" placeholder="请输入网址" />
            </div>
            <div>
                <button οnclick="add()">添加</button>
            </div>
        </div>
        <div class="box">
            <div>
                名称：<input type="text" id="search-name" value="" placeholder="请输入名称" />
            </div>
            <div>
                <button οnclick="search()">搜索</button>
            </div>
            <div>
                <button οnclick="searchAll()">查看所有</button>
            </div>
        </div>
        <div class="box">
            <div>结果：</div>
            <div id="result">暂未查询到任何数据</div>
        </div>
        <script>
            var inputName = document.getElementById('input-name');
            var inputSite = document.getElementById('input-site');
            var searchName = document.getElementById('search-name');
            var result = document.getElementById('result');

            // 添加
            function add() {
                var name = inputName.value;
                if (!name) {
                    alert('请输入名称！');
                    return;
                }
                var site = inputSite.value;
                if (!site) {
                    alert('请输入网址！');
                    return;
                }
                localStorage.setItem(name, site);
                alert('添加成功！');
                inputName.value = '';
                inputSite.value = '';
            }

            // 搜索
            function search() {
                var name = searchName.value;
                if (!name) {
                    result.innerText = '暂未查询到任何数据';
                } else {
                    var site = localStorage.getItem(name);
                    if (!site) {
                        result.innerText = '暂未查询到任何数据';
                    } else {
                        var elementStr = '<table>'
                        elementStr += '<tr><td>名称</td><td>网址</td></tr>';
                        elementStr += `<tr><td>${name}</td><td>${site}</td></tr>`;
                        elementStr += '</table>';
                        result.innerHTML = elementStr;
                    }
                }
            }

            // 查看所有
            function searchAll() {
                console.log(localStorage.length);
                if (localStorage.length > 0) {
                    var elementStr = '<table>'
                    elementStr += '<tr><td>名称</td><td>网址</td></tr>';
                    for (var i = 0; i < localStorage.length; i++) {
                        var name = localStorage.key(i);
                        var site = localStorage.getItem(name);
                        elementStr += `<tr><td>${name}</td><td>${site}</td></tr>`;
                    }
                    elementStr += '</table>';
                    result.innerHTML = elementStr;
                } else {
                    result.innerText = '暂未查询到任何数据';
                }
            }
        </script>
    </body>
</html>

示例效果如下：