文章/答案/技术大牛

发布

问实现HTML5存储API
EN

Stack Overflow用户

提问于 2020-09-18 11:39:08

回答 1查看 68关注 0票数 3

我已经开始了在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>

local-storage

javascript

api

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-09-18 12:05:33

这可能不是很好的解决方案，但现在您可以在本地存储中添加关键值。

希望，它会对你有所帮助。

<!DOCTYPE html>
<html lang='en'>
    <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>

现在您可以将键和值添加到本地存储中。

OutPut屏幕拍摄：

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63955073

复制

相似问题

问实现HTML5存储API
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问实现HTML5存储APIEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问实现HTML5存储API
EN