What is the local storage function of html5-Front-end Q&A-php.cn

What is the local storage function of html5

青灯夜游

Release： 2022-01-23 11:23:30

Original

2151 people have browsed it

In HTML5, local storage is a method that allows web pages to store key-value pairs in the user's browser client. Through local storage, web applications can store data locally in the user's browser.

What is the local storage function of html5

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

What is HTML local storage?

Local Storage (LocalStorage) is a method that allows web pages to store key-value pairs on the user's browser client; through local storage, web applications can Store data locally in the user's browser.

htmlLocal storage: Better than cookies

Prior to HTML5, application data could only be stored in cookies, including on every server request. Local storage is more secure and can store large amounts of data locally without affecting website performance.

Unlike cookies, the storage limit is much larger (at least 5MB) and the information is not transferred to the server.

Local storage via origin (via domain and protocol). All pages, from origin, are able to store and access the same data.

About the local storage object of html5:

window.localStorage Store permanent data

window.sessionStorage Store data for a session (when the browser is closed, the stored data will be cleared)

Simulate Taobao search and store local data?

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #all {
            width: 600px;
            margin: 100px auto 0px;
            position: relative;
        }

        #all input {
            float: left;
            width: 500px;
            height: 30px;
            outline: none;
            text-indent: 5px;
            border-radius: 15px 0px 0px 15px;
            border: 1px solid #ccc;
        }

        #all button {
            float: left;
            width: 80px;
            height: 32px;
            border: none;
            color: #fff;
            outline: none;
            border-radius: 0px 16px 16px 0px;
            background-color: orange;
        }

        #show {
            width: 490px;
            position: absolute;
            left: 10px;
            top: 30px;
            border: 1px solid #ccc;
            border-top: none;
            display: none;
        }

        #show p {
            padding-left: 10px;
            line-height: 20px;
            color: orange;
            font-size: 13px;
            padding-right: 10px;
        }

        #show p a {
            text-decoration: none;
            float: right;
        }
    </style>
</head>
<body>
<div id="all">
    <input type="text" id="text">
    <button id="enter">淘宝搜索</button>
    <div id="show">

    </div>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
    var text = $("#text");
    var enter = $("#enter");
    var show = $("#show");
    var data = localStorage.getItem("historyData") || "[]";
    var dataArr = JSON.parse(data);
    var init = function () {
        if (dataArr.length == 0){
            show.hide();
            return;
        }
        show.html("");
        $(dataArr).each(function (index, item) {
            $("<p></p>").text(item).prependTo(show).append($("<a href=&#39;javascript:;&#39;></a>").text("删除").attr("index", index));
        });
    }
    text.focus(function () {
        init();
        if(dataArr!=0)show.show();
    });
    enter.click(function () {
        var val = text.val().trim();
        if (val.length == 0) return;
        dataArr.push(val);
        localStorage.setItem("historyData", JSON.stringify(dataArr));
        text.val("");
        init();
    });
    $("#show").on("click", "a", function () {
        var index = $(this).attr("index");
        dataArr.splice(index, 1);
        localStorage.setItem("historyData", JSON.stringify(dataArr));
        init();
    });
</script>
</body>
</html>

Copy after login

Final rendering:

What is the local storage function of html5

Related recommendations: "html video tutorial"

The above is the detailed content of What is the local storage function of html5. For more information, please follow other related articles on the PHP Chinese website!