我正在对我的一个应用程序进行更新，该更新允许用户添加多个新列表并按字母顺序排列。
我正在使用LocalStorage来记住新创建的列表和按字母顺序排列的部分。
我无法将内容保存到textarea中，所以我改用了div[contenteditable]。现在，动态添加的新创建的“文本框”具有一个随机字符串作为选择器，我将使用数据属性在其中选择它。
现在，当我重新加载应用程序时，以前添加的值列表在那里，但是我的按字母顺序排列的按钮没有按字母顺序排列该列表。
有谁知道如何以这种方式使用LocalStorage在此处保存值？
为了这篇文章，下面是该应用程序的缩小版本。我不得不在代码段上注释掉localStorage，否则它不会在Stack Overflow上运行。我也在CodePen上添加了它。
// Creates a random string
function randString() {
var char = "0123456789abcdefghijklmnopqrstuvwxyz",
fullchar = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
genHash = "",
i;
for (i = 0; i < 8; i++) {
var rnum = Math.floor(Math.random() * char.length)
genHash += char.substring(rnum, rnum + 1)
}
return genHash
}
// localStorage Stuff
// Remember list-btns after Delete
// if ( localStorage.getItem("listTree")) {
// $("[data-action=list-tree]").html(localStorage.getItem("listTree"))
// }
// // Remember alph-btns after Delete
// if ( localStorage.getItem("alphTree")) {
// $("[data-action=alph-tree]").html(localStorage.getItem("alphTree"))
// }
// Remember lists
function RememberTrees() {
// Remember list-btns after Delete
// localStorage.clear()
// localStorage.setItem("listTree", $("[data-action=list-tree]").html())
// localStorage.setItem("alphTree", $("[data-action=alph-tree]").html())
}
// Grab currently selected list
var GrabActiveList = function() {
$(".added-btn-list").on("click", function() {
// Show/Hide Nav Buttons
$(".newlist").addClass("hide")
$(".backbtn").removeClass("hide")
// Show active editor
var callThis = $(this).attr("data-call")
$("[data-call=" + callThis + "]").not("[data-action=" + callThis + "]").removeClass("hide")
$("[data-action=" + callThis + "]").removeClass("hide")
$("[data-value=" + callThis + "] *").removeClass("hide")
// Hide previously added lists
$(".added-btn-list").addClass("hide")
// localStorage.clear()
RememberTrees()
// Alphabetize List
$(".alphlist").on("click", function() {
var selector = $(this).attr("data-action")
$("[data-value=" + selector + "]").html($("[data-value=" + selector + "]").html().split("<div>").sort(caseInsensitive).join("<div>"))
function caseInsensitive(a, b) {
return a.toLowerCase().localeCompare(b.toLowerCase())
}
RememberTrees()
})
$("[data-value=" + callThis + "]").on("change keyup", function() {
RememberTrees()
})
// Delete List
$("[data-action=del" + callThis + "]").on("click", function() {
$("[data-call=" + callThis + "]").remove()
$(".backbtn").click()
RememberTrees()
})
})
}
GrabActiveList()
// Delete All Lists
function deleteAllLists() {
alertify.confirm("This action is irreversable.", "Are you sure you wish to clear all your added lists?", function() {
$("[data-action=alph-tree]").html("")
$("[data-action=list-tree]").html("")
$(".backbtn").click()
// localStorage.clear()
RememberTrees()
}, function() {
// Operation aborted
})
}
// Create and Manage Lists
$("[data-action=new-list]").on("click", function() {
alertify.prompt("Title of your new list.", "",
function(evt, value) {
// Random string
var genHash = randString()
// New textbox list
var newTxtList = $("<div>", {
class: "added-txt-list txtbox hide"
}).attr("contenteditable", true).attr("data-call", genHash).attr("data-value", genHash).appendTo("[data-action=list-tree]").on("keyup change", function() {
RememberTrees()
})
// New button list
var newBtnList = $("<button>", {
text: value,
class: "added-btn-list"
}).attr("data-call", genHash).attr("data-action", "btn"+ genHash).appendTo("[data-action=list-tree]")
// New alphabet list
var alphList = $("<button>", {
text: "Alphabetize",
class: "alphlist hide"
}).attr("data-call", genHash).attr("data-action", genHash).appendTo("[data-action=alph-tree]")
// New delete list
var delList = $("<button>", {
text: "Delete This",
class: "added-del-btn hide"
}).attr("data-call", genHash).attr("data-action", "del"+ genHash).appendTo("[data-action=list-tree]")
// New delete all button
var delAll = $("<button>", {
text: "Delete All",
class: "added-delall-btn hide"
}).attr("data-call", genHash).attr("data-action", "delall").appendTo("[data-action=list-tree]").on("click", function() {
deleteAllLists()
})
GrabActiveList()
}, function() {
// User clicked cancel
}).set("basic", true)
return false
})
// Handles Back Button
$(".backbtn").click(function() {
$(".newlist").removeClass("hide")
$(".backbtn, .alphlist").addClass("hide")
$(".added-btn-list").removeClass("hide")
$(".added-txt-list").addClass("hide")
$(".added-del-btn").addClass("hide")
$(".added-delall-btn").addClass("hide")
// Remember list-btns after Delete
RememberTrees()
})
// Remember when all lists are deleted
$("[data-action=delall]").on("click", function() {
deleteAllLists()
})
// Hide all appended data except the newly added btn-lists
$(".alph-tree *").addClass("hide")
$(".list-tree *").addClass("hide")
$(".added-btn-list").removeClass("hide").hide {
display: none;
}
[contenteditable], .txtbox {
margin: 20px 0;
border-radius: 5.6px;
padding: 15px;
background: #fff;
border: 0;
outline: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://alertifyjs.com/build/alertify.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://alertifyjs.com/build/css/themes/default.css" rel="stylesheet"/>
<link href="http://alertifyjs.com/build/css/alertify.css" rel="stylesheet"/>
<div class="grid">
<div class="grid__col--12">
<h2 class="backbtn hide" data-action="go-back">
<i class="fa fa-chevron-left"></i>
</h2>
<button class="newlist" data-action="new-list">New List</button>
<span class="alph-tree" data-action="alph-tree"></span>
<div class="list-tree" data-action="list-tree"></div>
</div>
</div>最佳答案
LocalStorage工作正常:
我测试了您的Codepen项目，按字母顺序排列的按钮在两种情况下均不起作用:创建后立即重新加载后。因此，我认为您这里遇到一个与LocalStorage无关的逻辑问题。
应该按字母顺序做什么？相应的div始终为空。