如何在JavaScript中创建localStorage项目列表

时间:2019-04-20 11:47:09

标签: javascript jquery html

我对localStorage存储的值有错误,我得到了这样的结果[“ john”,“ smith”,“ sharik”,“这是存储值”]

但是我希望换行中的每个项目都没有任何分号或括号。

我想要这样:-

  1. john
  2. 史密斯
  3. sharik
  4. 这是储值

我该如何实现,请在我的代码下方帮我->

$(".searchsome").on("click",function search(e) {
addEntry();
var entry = localStorage.getItem("allEntrie");
for (var i = 0; i < entry.length; i++) {
$(".showSearchData").append('<p class="keywordsOnDiv">' + entry[i] + '</p>');
});

function addEntry() {
var existingEntries = JSON.parse(localStorage.getItem("allEntrie"));
if(existingEntries == null) existingEntries = [];
var entryTitle = $(".searchsome").val();
localStorage.setItem("entrys", entryTitle);
existingEntries.push(entryTitle);
localStorage.setItem("allEntrie",existingEntries);
};

在这里,我的代码请促使我获得所有带有换行符且没有分号和方括号的存储名称,谢谢StackOverFlow。

2 个答案:

答案 0 :(得分:0)

如果存储在localStorage中的值类似于'["john","smith", "sharik", "this is stored value"]'

然后在此行使用JSON.parse

var entry = JSON.parse(localStorage.getItem("allEntrie"));
for (var i = 0; i < entry.length; i++) {
$(".showSearchData").append('<p class="keywordsOnDiv">' + entry[i] + '</p>');
});

答案 1 :(得分:0)

请尝试在下面使用简单的搜索栏,该搜索栏将密钥存储在localStorage中,但是请确保删除var localStorage = {};只是为了在Stackoverflow上进行测试。

这将从localStorage获取存储的数据作为数组,并在添加新项后将其转换回字符串并再次存储。

function addEntry(v) {
  //------------------------
  var localStorage = {}; // <--- remove this line
  //------------------------


  var existingEntries = JSON.parse(localStorage["allEntrie"] || "[]");
  existingEntries.push(v);
  localStorage["entrys"] = v;
  localStorage["allEntrie"] = JSON.stringify(existingEntries);
  return v;
};

$(".searchsome").on("keyup", function() {
  var v = this.value.replace(/\s+/g, " ").trim();
  $(".showSearchData").prepend('<p class="keywordsOnDiv">' + addEntry(v) + '</p>');
});
p {
  padding: 1px;
  margin: 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="searchsome" />
<div class="showSearchData">
  <div>