使用LocalStorage按字母顺序排列内容列表
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用LocalStorage按字母顺序排列内容列表相关的知识,希望对你有一定的参考价值。
我正在对我的一个应用程序进行更新,允许用户添加多个新列表并按字母顺序排列。
我正在使用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项目,alphabetize按钮在两种情况下都不起作用:创建后立即和重新加载后。所以我相信你在这里有一个与LocalStorage无关的逻辑问题。
字母表应该做什么?相应的div总是空的。
以上是关于使用LocalStorage按字母顺序排列内容列表的主要内容,如果未能解决你的问题,请参考以下文章
获得列表中重复次数最多的名称,如果出现平局,则按字母顺序排列第一个