Apakah ciri storan tempatan html5-Soal Jawab bahagian hadapan-php.cn

Apakah ciri storan tempatan html5

青灯夜游

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

asal

2163 orang telah melayarinya

Dalam HTML5, storan tempatan ialah kaedah yang membenarkan halaman web menyimpan pasangan nilai kunci dalam klien penyemak imbas pengguna. Melalui storan tempatan, aplikasi web boleh menyimpan data secara setempat dalam penyemak imbas pengguna.

Apakah ciri storan tempatan html5

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi HTML5, komputer Dell G3.

Apakah storan tempatan HTML?

本地存储（LocalStorage） ialah kaedah yang membolehkan halaman web menyimpan pasangan nilai kunci pada klien penyemak imbas pengguna, melalui storan tempatan, aplikasi web boleh menyimpan data dalam penyemak imbas pengguna .

storan tempatan html: 优于cookies

Sebelum HTML5, data aplikasi hanya boleh disimpan dalam kuki dengan setiap permintaan pelayan. Storan tempatan lebih selamat dan boleh menyimpan sejumlah besar data secara setempat tanpa menjejaskan prestasi tapak web.

Tidak seperti kuki, had storan adalah lebih besar (sekurang-kurangnya 5MB) dan maklumat tidak dipindahkan ke pelayan.

Storan tempatan melalui asal (melalui domain dan protokol). Semua halaman, dari asal, dapat menyimpan dan mengakses data yang sama.

Mengenai objek storan setempat html5:

window.localStorage Simpan data kekal

window.sessionStorage Simpan data untuk sesi (apabila penyemak imbas Tutup, data yang disimpan akan dikosongkan)

Simulasikan carian Taobao dan simpan data setempat?

<!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>

Salin selepas log masuk

Pemarahan akhir:

Apakah ciri storan tempatan html5