时间戳

首页 > 解决方案 > 检索多个值本地存储并在 div 元素中显示

javascript - 检索多个值本地存储并在 div 元素中显示

问题描述

我想显示本地存储中所有数据的键及其值。

我写了一些 HTML 和 javascript：

// Setting some values in the local storage
  localStorage.setItem("lastname", "Smith");
  localStorage.setItem("lastname", "Orange");
  localStorage.setItem("lastname", "Green");
  localStorage.setItem("lastname", "Pink");


// Attempt to retrieve them

  function allStorage() {

    var archive = [],
        keys = Object.keys(localStorage),
        i = 0, key;

    for (; key = keys[i]; i++) {
        archive.push( key + '=' + localStorage.getItem(key));
    }

	 document.getElementbyId("result").innerHTML = archive;
}
<div id="result"></div>


<button onclick="allStorage()">Show Local Storage</button>

有谁知道我在这里可能会出错？

据我所知：变量设置正确，因为它们可以在控制台中访问。但是，当我单击运行该功能时，窗口或控制台中没有任何反应。

我正在寻找的结果是：

lastnameSmithlastnameOrangelastnameGreenlastnamePink

定于<div id="result">

标签： javascripthtmllocal-storage

解决方案

试试这个，键名localStorage应该是唯一的，否则它将覆盖这些值。

HTML

  <div id="result"></div>
  <button onclick="allStorage()">Show Local Storage</button>

JS

 // Setting some values in the local storage
      localStorage.setItem("lastname1", "Smith");
      localStorage.setItem("lastname2", "Orange");
      localStorage.setItem("lastname3", "Green");
      localStorage.setItem("lastname4", "Pink");


    // Attempt to retrieve them

      function allStorage() {

        var archive = [],
            keys = Object.keys(localStorage),
            i = 0, key;

        for (; key = keys[i]; i++) {
            archive.push( key + '=' + localStorage.getItem(key));
        }

         document.getElementById("result").innerHTML = archive;
    }

推荐阅读