[JavaScript知识库] HTML5 Web存储

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> HTML5 Web存储 -> 正文阅读

[JavaScript知识库]HTML5 Web存储

一、Cookie LocalStorage SessionStorage

1、共同点： 都是浏览器的本地存储
2、区别：
来自牛客网
（图片来源牛客网）

二、代码示例

1、HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5-Web存储</title>
    <script src="storage.js"></script>
</head>

<body>
    <button type="button" onclick="clickCounterLocal()">localStorage</button>
    <div id="resultLocal"></div>
    <p>请点击按钮使计数器递增。</p>
    <p>关闭浏览器或标签页后再打开，不会重置</p>
    <button type="button" onclick="clickCounterSession()">sessionStorage</button>
    <div id="resultSession"></div>
    <p>请点击按钮使计数器递增。</p>
    <p>关闭浏览器或标签页后，计数器重置</p>
</body>

</html>

2、JS

function clickCounterLocal() {
    if (typeof (Storage) == "undefined") {
        document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持Web Storage!";
    } else {
        if (!localStorage.clickcountlocal) {
            localStorage.clickcountlocal = 1;
        } else {
            // 名称/值对始终存储为字符串！这里需将值从字符串转换为数字型
            // localStorage.键名 = 值；或者localStorage.setItem("键","值")；值=localStorage.getItem("键")
            localStorage.clickcountlocal = Number(localStorage.clickcountlocal) + 1;
        }
        document.getElementById("resultLocal").innerHTML = "您已经点击这个按钮" + localStorage.clickcountlocal + "次";
    }
}
// 删除对应键”xx”所存储在本地的值
localStorage.removeItem("clickcount");
function clickCounterSession() {
    if (typeof (Storage) == "undefined") {
        document.getElementById("resultSession").innerHTML = "抱歉！您的浏览器不支持Web Storage!";
    } else {
        if (!sessionStorage.clickcountsession) {
            sessionStorage.setItem("clickcountsession", "1");
        } else {
            sessionStorage.clickcountsession = Number(sessionStorage.clickcountsession) + 1;
        }
        document.getElementById("resultSession").innerHTML = "您已经点击这个按钮" + sessionStorage.clickcountsession + "次";
    }
}