Question

get函数在我的代码中似乎无法正常工作。我可以成功运行它而不会出现任何错误。我的数据正在进入本地存储。但是，当我尝试将数据从本地存储中拉出时，它仍然会发送null的结果。

<html>
<head>
<script type="text/javascript">

/**
 * A JSON string that holds data. There is no problem with the JSON string
 * @type {String}
  */

    var busSchd = '{"Routes": [{"routeName": "Milledge","stops":[{"Stop 1":"Main Library","Stop 2":"Clarke Central","Stop 3":"Five Points South","Stop 4":"Five Points North","Stop 5":"Waddell"}]},{"routeName": "Orbit","stops":[{"Stop 1":"Main Library","Stop 2":"Clarke Central","Stop 3":"Five Points South","Stop 4":"Five Points North","Stop 5":"Waddell"}]},{"routeName": "East West","stops":[{"Stop 1":"East Campus Deck","Stop 2":"Creswell Hall","Stop 3":"Hull St Deck","Stop 4":"Main Library","Stop 5":"Joe Frank Harris"}]}]}';

    
const load = () => {
    let data = JSON.parse(busSchd);
    console.log("a");
for (var i = 0; i < data.Routes.length;)
     {
         let route = data.Routes[i++];
         let routeStr = route.routeName;
         localStorage.setItem(routeStr, JSON.stringify(route.stops));
      }

};

    const clicked = () => {
     
       var search = document.getElementById("search");
       var results = localStorage.getItem("search");

      if (results === null) {
        document.getElementById("result").innerHTML = "<b>There are no results for that route name.</b>";
      } else {
        var stops = results;
        var output = '';
        for (var key in stops[0]) {
          var output = output + '<b>' + key + '</b> : ' + stops[0][key] + '<br>';
        }
        document.getElementById("result").innerHTML = output;
      }
    };
  </script>
</head>
<body>
  <input type="button" value="Load Route Data" id="load" onclick="load();">
  <br>
  <br>
  <input type="text" id="search"><input type="button" value="Find Route" id="submit" onclick="clicked();"><br>
  <br><br>
  <div id="result">
  </div>
</body>
</html>

Answer 1

从快速浏览来看，有很多问题。但是让您开始：

var search = document.getElementById("search");
var results = localStorage.getItem("search");

应该是：

var search = document.getElementById("search").value;
var results = localStorage.getItem(search);

结尾没有.value，搜索仅返回元素，而不返回用户输入。结果，放入“搜索”会使它寻找一个名为“搜索”的存储项目，在该存储项目中您要搜索存储在变量搜索中的输入（不带引号）；另外，脚本标签应在结束正文标签之前。

Answer 2

您的localStorage分配是对routeStr变量的：

localStorage.setItem(routeStr, JSON.stringify(route.stops));

但是您的检索来自.search属性：

var results = localStorage.getItem("search");

因为您从未分配给localStorage.search，所以results始终为空。尝试从输入的路由名称中检索。您还需要修复从localStorage检索停止信息的功能。

由于堆栈代码段不支持localStorage，因此请查看JSFiddle上的演示：

https://jsfiddle.net/5muvh4gj/

var busSchd = '{"Routes": [{"routeName": "Milledge","stops":[{"Stop 1":"Main Library","Stop 2":"Clarke Central","Stop 3":"Five Points South","Stop 4":"Five Points North","Stop 5":"Waddell"}]},{"routeName": "Orbit","stops":[{"Stop 1":"Main Library","Stop 2":"Clarke Central","Stop 3":"Five Points South","Stop 4":"Five Points North","Stop 5":"Waddell"}]},{"routeName": "East West","stops":[{"Stop 1":"East Campus Deck","Stop 2":"Creswell Hall","Stop 3":"Hull St Deck","Stop 4":"Main Library","Stop 5":"Joe Frank Harris"}]}]}';


window.load = () => {
  let data = JSON.parse(busSchd);
  console.log("a");
  for (var i = 0; i < data.Routes.length;) {
    let route = data.Routes[i++];
    let routeStr = route.routeName;
    localStorage.setItem(routeStr, JSON.stringify(route.stops));
  }

};

window.clicked = () => {
  var search = document.getElementById("search");
  var results = JSON.parse(localStorage.getItem(search.value));
  if (results === null) {
    document.getElementById("result").innerHTML = "<b>There are no results for that route name.</b>";
    return;
  }
  const output = Object.entries(results[0]).reduce((a, [stopNum, stopName]) => (
    a + '<b>' + stopNum + '</b> : ' + stopName + '<br>'
  ), '');
  document.getElementById("result").innerHTML = output;
};

<input type="button" value="Load Route Data" id="load" onclick="load();">
<br>
<br>
<input type="text" id="search"><input type="button" value="Find Route" id="submit" onclick="clicked();"><br>
<br><br>
<div id="result">
</div>

get函数无法与JSON字符串中的本地存储一起正常使用

2 个答案: