Jquery -添加标签在html与localStorage数组值?

这个代码不工作!!

所有代码都是正确的，只有a标签没有添加。为什么?

我希望在刷新页面后显示这些值

$('#Search_Id').keypress(function(event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '13') {
let key = "Search_Text";
let value = $(this).val();
if (key && value) {
if (localStorage.getItem(key)) {
let vals = localStorage.getItem(key).split(',');
if (!vals.includes(value)) {
vals.push(value);
vals.sort();
localStorage.setItem(key, vals.join(','));
}
for (var i = 0; i <= vals.length - 1; i++) {
let txt = vals[i];
$(".search-header .search-result ul.search-result-list li#story_search").append('<a name="search_txt" class="txt-search-story" href="#"><span>' + txt + '</span></a>');
}
} else {
localStorage.setItem(key, value);
}
location.reload();
}
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li id="story_search" class="span-row"></li>
</ul>

考虑下面的例子:

小提琴:https://jsfiddle.net/Twisty/L876vjmc/46/

<form id="searchForm">
Search: <input id="searchTerm" type="text">
</form>
<ul>
<li id="searchStory" class="span-row"></li>
</ul>
<button id="clearStory">Clear</button>

JavaScript

$(function() {
function getItems(key) {
console.log("Getting Items from key: " + key);
var results = [];
try {
results = localStorage.getItem(key).split(',');
} catch (error) {
console.log(error);
}
console.log(results);
return results;
}
function setItems(key, data) {
console.log("Setting Items into key: " + key);
try {
localStorage.setItem(key, data.join(','));
return true;
} catch (error) {
console.log(error);
return false;
}
}
function resetItems(key) {
localStorage.removeItem(key);
$("#searchStory").empty();
}
function searchItems(key, term) {
console.log("Search: " + key + ", for: " + term);
var items = getItems(key);
if (items.indexOf(term) == -1) {
console.log("Not Found. Pushing it.");
items.push(term);
}
items.sort();
console.log(items);
return items;
}
$("#searchForm").submit(function(event) {
event.preventDefault();
let k = "Search_Text";
let t = $("#searchTerm").val();
console.log("Trigger Search for: " + t);
if (k && t != undefined && t.length > 0) {
if (getItems(k).length == 0) {
setItems(k, [t]);
}
var vals = searchItems(k, t);
setItems(k, vals);
$("#searchStory").empty();
$.each(vals, function(i, s) {
$("<a>", {
name: "search_txt",
class: "txt-search-story",
href: "#"
}).html("<span>" + s + "</span>").appendTo($("#searchStory"));
});
//location.reload();
}
return false;
});
$("#clearStory").click(function() {
resetItems("Search_Text");
});
});

设置一些小函数来帮助常见的操作是很有帮助的。我创建了获取、保存和重置LocalStorage的函数。

用表单包装不是必需的，但它可能是有帮助的。例如，我使用LastPass，当我在Input元素上按Enter键时，这会导致问题。使用表单，用户可以输入文本并点击输入来提交表单。当移动设备点击"Go"在手机键盘上。它删除了一些不再需要的代码。

剩下的只是基于您的示例清理的jQuery代码。

https://jsfiddle.net/Twisty/L876vjmc/55/
现在我们有了可以由事件运行或独立运行的showSearchStory。

相关内容

最新更新

热门标签：