亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

實施 HTML5 存儲 API

實施 HTML5 存儲 API

慕尼黑5688855 2023-03-10 16:08:36
我已經開始快速練習在 JS 中使用本地存儲/會話存儲,我的 LoadFromStorage 函數似乎有問題。每次調用控制臺日志時,“replaceNode”都不是函數。window.onload = function() {  document.getElementById('btnAdd').onclick = function() {    localStorage.setItem(document.getElementById("toStorageKey").value,      document.getElementById("toStorageValue").value);    LoadFromStorage();  }  document.getElementById('btnRemove').onclick = function() {    localStorage.removeItem(document.getElementById('toStorageKey').value);    LoadFromStorage();  }  document.getElementById('btnClear').onclick = function() {    localStorage.clear();    LoadFromStorage();  }  function LoadFromStorage() {    var storageDiv = document.getElementById('storage');    var tbl = document.createElement('table');    tbl.id = "storageTable";    if (localStorage.length > 0) {      for (var i = 0; i < localStorage.length; i++) {        var row = document.createElement("tr");        var key = document.createElement("td");        var val = document.createElement('td');        key.innerText = localStorage.key(i);        val.innerText = localStorage.getItem(key.innerText);        row.appendChild(key);        row.appendChild(val);        tbl.appendChild(row);      }    } else {      var row = document.createElement('tr');      var col = document.createElement('td');      col.innerText = 'No data in local storage.';      row.appendChild(col);      tbl.appendChild(row);    }    if (document.getElementById('storageTable')) {      document.getElementById('storageTable').replaceNode(tbl);    } else {      storageDiv.appendChild(tbl);    };  };}section {  margin-top: 15px;}<section>  Key: <input type="text" id="toStorageKey"><br> Value: <input type="text" id="toStorageValue"><br></section><section>  <button type="button" id="btnAdd">Add to storage</button>  <button type="button" id="btnRemove">Remove from storage</button>  <button type="button" id="btnClear">Clear storage</button></section><div id="storage">  <p>Current Storage Contents</p></div>
查看完整描述

1 回答

?
慕工程0101907

TA貢獻1887條經驗 獲得超5個贊

可能不是很好的解決方案,但現在您可以在本地存儲中添加鍵值。


希望,它會幫助你一些擴展。


<!DOCTYPE html>

<html>

    <head> 

        <meta charset='utf-8'>

        <style>

            section {

                margin-top: 15px;

            }

        </style>

        <script>

            window.onload = function () {

                    document.getElementById('btnAdd').onclick = function () {

                    localStorage.setItem(document.getElementById("toStorageKey").value,

                    document.getElementById("toStorageValue").value);

                        LoadFromStorage();

                }

                   

                document.getElementById('btnRemove').onclick = function () {

                    localStorage.removeItem(document.getElementById('toStorageKey').value);

                    console.log("Remove Item",document.getElementById('toStorageKey').value)

                    LoadFromStorage();

                }

                document.getElementById('btnClear').onclick = function () {

                    localStorage.clear();

                    LoadFromStorage();

                }

                function LoadFromStorage() {

                        var storageDiv = document.getElementById('storage');

                        var tbl = document.createElement('table');

                        tbl.id = "storageTable";

                        if (localStorage.length > 0) {

                            for (var i = 0; i < localStorage.length; i++) {

                                var row = document.createElement("tr");

                                var key = document.createElement("td");

                                var val = document.createElement('td');

                                key.innerText = localStorage.key(i);

                                val.innerText = localStorage.getItem(key.innerText);

                                row.appendChild(key);

                                row.appendChild(val);

                                tbl.appendChild(row);

                                }

                        } else {

                            var row = document.createElement('tr');

                            var col = document.createElement('td');

                            col.innerText = 'No data in local storage.';

                            row.appendChild(col);

                            tbl.appendChild(row);

                        }

                        if (document.getElementById('storageTable')) {

                            document.getElementById('storageTable').replaceWith(tbl);

                        } else {

                            storageDiv.appendChild(tbl);

                        };

                    };

            }

             

            

        </script>

    </head>

    <body>

        <section>

            Key: <input type="text" id="toStorageKey"><br>

            Value: <input type="text" id="toStorageValue"><br>

        </section>

        <section>

            <button type="button" id="btnAdd">Add to storage</button>

            <button type="button" id="btnRemove">Remove from storage</button>

            <button type="button" id="btnClear">Clear storage</button>

        </section>

        <div id="storage">

            <p>Current Storage Contents</p>

        </div>

    </body>

</html>

現在您可以將鍵和值添加到本地存儲。

輸出屏幕截圖:

http://img1.sycdn.imooc.com//640ae5b80001384616640697.jpg

查看完整回答
反對 回復 2023-03-10
  • 1 回答
  • 0 關注
  • 139 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號