HTML5 web storage

eynoZzzzc

已于 2022-03-02 19:17:00 修改

阅读量329

点赞数

分类专栏： HTML+CSS+JavaScript 文章标签：前端 html5 javascript

于 2022-03-01 22:04:15 首次发布

本文链接：https://blog.csdn.net/qq_44185558/article/details/123215467

版权

HTML+CSS+JavaScript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

H5的web storage可在本地存储用户的浏览数据，数据以键值对存在，web网页的数据只允许该网页访问。

localStorage

用于长期保存网站的数据，没有时间限制。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="result"></div>
<script>
    if (typeof (Storage) != "undefined") {
        // localStorage.setItem("sitename", "baidu");
        localStorage.sitename="baidu";
        // document.getElementById("result").innerHTML = "网站名:" + localStorage.getItem("sitename");
        document.getElementById("result").innerHTML="网站名："+ localStorage.sitename
    } else {
        document.getElementById("result").innerHTML = "对不起，您的浏览器不支持 web 存储。";
    }
</script>
</body>
</html>

sessionStorage

临时保存网站数据，关闭窗口时会删除数据。
以下代码实现按钮点击：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function click_counts(){
            if(typeof(Storage)!="undefined"){
                if(sessionStorage.clickcount){
                    sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
                }else{
                    sessionStorage.clickcount=1;
                    // sessionStorage.setItem("clickcount","1");
                }
                document.getElementById('res').innerHTML="点击了"+sessionStorage.clickcount+"次";
            }else{
                document.getElementById("res").innerHTML="抱歉，您的浏览器不支持 web 存储";
            }
        }
    </script>
</head>
<body>
<p>
    <button onclick="click_counts()">click here</button>
</p>
<div id="res"></div>
</body>
</html>

网站列表程序

以网站名作为localStorage的key
根据网站名查找网址
列出所有保存的网站

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 载入所有存储在localStorage的数据
        load_all();

        function save(){
            var sitename=document.getElementById("sitename").value;
            var siteurl=document.getElementById("siteurl").value;
            localStorage.setItem(sitename,siteurl);
            alert("add successfully");
        }

        function find(){
            var search_site=document.getElementById("search_site").value;
            var siteurl = localStorage.getItem(search_site);
            //显示在p中
            var find_result = document.getElementById("find_result");
            find_result.innerHTML = search_site + "的网址是：" + siteurl;
        }

        function load_all(){
            var list=document.getElementById("list");
            if (localStorage.length>0){
                var result="<table border='1'>";
                result += "<tr><td>key</td><td>value</td></tr>";
                for(var i=0;i<localStorage.length;i++){
                    var sitename = localStorage.key(i);
                    var siteurl = localStorage.getItem(sitename);
                    result += "<tr><td>"+sitename+"</td><td>"+siteurl+"</td></tr>";
                }
                result += "</table>";
                list.innerHTML = result;
            }else{
                list.innerHTML= "data is null";
            }
        }
    </script>

    <style type="text/css">
        div{
            border: 2px dashed #ccc;
            width:320px;
            text-align:center;
        }
    </style>
</head>
<body>
    <div>
        <label for="sitename">website name:</label>
        <input type="text" id="sitename" name="sitename" class="text"/><br>
        <label for="siteurl">website url:</label>
        <input type="text" id="siteurl"  name="siteurl" /><br>
        <input type="button" onclick="save()" value="add"/>
        <hr/>

        <label for="search_phone">input sitename：</label>
        <input type="text" id="search_site" name="search_site" />
        <input type="button" onclick="find()" value="search site" />
        <p id="find_result"><br/></p>
    </div>
    <br>
    <div id="list"></div>
</body>
</html>

注意：可以将网站字符串转换为JSON对象。

常用API（sessionStorage同）：
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);

eynoZzzzc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5 web storage

H5的web storage可在本地存储用户的浏览数据，数据以键值对存在，web网页的数据只允许该网页访问。localStorage用于长期保存网站的数据，没有时间限制。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="r
复制链接

扫一扫