万象更新 Html5 - h5: h5 localStorage 和 sessionStorage

源码 https://github.com/webabcd/Html5
作者 webabcd

万象更新 Html5 - h5: h5 localStorage 和 sessionStorage

示例如下:

h5\storage.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>localStorage 和 sessionStorage</title>
</head>
<body>

<div id='divMsg'></div>

<script>

    // localStorage - 当前浏览器永久有效
    // sessionStorage - 当前浏览器的当前标签页有效,关了则清空
    // 不同域名使用不同的存储空间(相同域名指的是:协议,域名,端口均相同)
    // 存储空间的大小是有限制的,不同浏览器的大小限制不一样
    // 存储保存的是 key/value 数据,且 key 和 value 都必须是字符串类型
    // 本例以 localStorage 为例做说明,sessionStorage 的用法是一样的,就不写了

    // localStorage 的保存和读取 key/value 的方法
    window.localStorage.setItem("key1", "value1");
    localStorage.key2 = "value2";
    writeMessage(localStorage.key1);
    writeMessage(localStorage.getItem("key2"));

    // localStorage.length - 数据条数
    // localStorage.key(index) - 指定索引位置的 key 值
    writeMessage("localStorage 数据条数" + localStorage.length);
    for (let i = 0; i < localStorage.length; i++) {
        writeMessage(`第 ${i + 1} 条数据的 key 为: ${localStorage.key(i)}, value 为: ${localStorage.getItem(localStorage.key(i))}`);
    }

    // 删除指定 key 的数据
    // localStorage.removeItem(key);
    // 删除全部数据
    // localStorage.clear();

    // 获取可用的存储空间的大小(此值是一个保守的近似值,且不是所有浏览器都支持)
    //     estimate.usage - 已用大小(单位:字节)
    //     estimate.quota - 总大小(单位:字节)
    // 注:这个存储空间的大小包括 localStorage, sessionStorage, IndexedDB, Service Worker 等
    if ('storage' in navigator && 'estimate' in navigator.storage) {
        navigator.storage.estimate().then(function(estimate) {
            writeMessage(`estimate.usage: ${estimate.usage},  quota: ${estimate.quota}`);
        });
    } else {
        writeMessage("不支持 navigator.storage.estimate()");
    }

    function writeMessage(message) {
        var divMsg = document.getElementById("divMsg");
        divMsg.innerHTML += message;
        divMsg.innerHTML += "<br />";
    }

</script>

</body>
</html>

源码 https://github.com/webabcd/Html5
作者 webabcd

posted @ 2024-09-24 10:57  webabcd  阅读(10)  评论(0编辑  收藏  举报