localStorage与sessionStorage小总结

最新推荐文章于 2022-08-15 22:00:25 发布

不期望不希望不奢望

最新推荐文章于 2022-08-15 22:00:25 发布

阅读量62

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_72101182/article/details/125876548

版权

localStorage与sessionStorage最大的区别就是

localStorage理论上来说是永久有效的，也就是说不主动清空的话就不会消失。

刷新之后，从3开始计数

sessionStorage只要关闭浏览器，就会被清空。

案例：输入数据传输到浏览器端并显示

首先是h5+css3的内容，不多赘述

 <p>
        <span>网络名(key):</span>
        <input type="text" id="siteName" placeholder="请输入网站名">
        <span>网址(value):</span>
        <input type="text" id="siteValue" placeholder="请输入对应网址">
        <input type="button" class="add" value="添加" onclick="add()">
    </p>
    <div id="tab">
    </div>
    <hr>
    <p>
        <span>网络名(key):</span>
        <input type="text" id="key" placeholder="请输入网站名">
        <input type="button" class="search" value="查询" onclick="search()">
        <div id="result">搜索结果显示</div>
    </p>

1.添加

 function add() {
            var wName = document.getElementById("siteName").value;
            var wAddress = document.getElementById("siteValue").value;
            localStorage.setItem(wName, wAddress)
            alert("添加成功！")
        }

目的只为了获取表单中输入的网站名和网址

2.查询

function search() {
            var key = document.getElementById("key").value;
            document.getElementById("result").innerHTML 
= "网站名:" + key + "<br>网址" + localStorage.getItem(key);
        }

获取表单中输入的网站名和网址

3.将数据传递到表单中

  function loadAll() {
            var result = "<table>";
            result += "<tr><th>网站名(key)</th><th>网址(value)</th></tr>";
            for (var i = 0; i < localStorage.length; i++) {
                var s = localStorage.key(i) + " " + localStorage.getItem(localStorage.key(i));
                result += "<tr><td>" + localStorage.key(i) + "</td><td>" + localStorage.getItem(localStorage.key(i)) + "</td></tr>"
            }
            result += "</table>"
            document.getElementById("tab").innerHTML = result;
        }

使用循环获取到每一个item