javascript - 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/
HTML
<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使用表单,用户可以输入文本并点击Enter提交表单。当移动设备在移动键盘上点击“开始”时,这也适用于移动设备。它删除了大量不再需要的代码。
其余的只是根据您的示例清理了 jQuery 代码。
更新
https://jsfiddle.net/Twisty/L876vjmc/55/
现在我们有了showSearchStory
它可以由一个事件或它自己运行。
推荐阅读
- rest - 使用 REST API 在 ejabberd 中注册新用户
- python - BeautifulSoup 从评论 html 中提取文本
- php - 如何将多维数组插入数据库 - 使用 laravel 5.5
- sql-server - 保存到 SQL Server 时 Laravel 日期时间格式不正确
- python - 在更新 Python 启动器之前不会删除消息框
- c# - 在 foreach 循环中插值 C#,如何做到这一点
- javascript - Visual Studio Community 2017 的客户端和服务器端 JavaScript 调试体验
- html - 为什么将 position:absolute 的元素放在 ::after 伪元素后面
- android - 无法使用 Dialogflow Android 客户端从 Dialogflow Webhook 访问 SimpleResponse。无法访问有效载荷
- ios - 保存到 UserDefaults 时应用程序总是崩溃