【发布时间】：2015-06-01 19:34:56
【问题描述】：
我正在尝试创建一个保存到本地存储的数组，用户可以对项目进行排序、添加项目、删除项目以及清除本地存储。我在让删除或拼接用户输入工作时遇到很多麻烦，有人可以给我一些建议吗？
这是我目前的代码，如果不好，请原谅我，一定很想知道如何使它变得更好。
...
<script>
//lets my program know the books1 variable is an array
var books1 = []
//lets my program know the result variable is a string
var result = ""
//checks to see if the localstorage key booksArray exists, if it doesn't books1 has 3 books added ans is stored locally with a key of booksArray
if (localStorage.getItem("booksArray") == null) {
books1 = ["book1", "book2", "book3", "m", "p"]
localStorage.setItem("booksArray", JSON.stringify(books1))
// var theArray = JSON.parse("booksArray")
}
else {
loadBooks(); //loads the books to an array with variable name listBooks
}
function loadBooks() {
var result = localStorage.getItem("booksArray")
var listBooks = JSON.parse(result)
}
function sortBooks() {
var sortedBooks1 = localStorage.getItem("booksArray")
var sortedBooks2 = JSON.parse(sortedBooks1)
// loadBooks may work but haven't got it to yet. try redoing the project on books Array 2.2
sortedBooks2.sort()
document.getElementById("display1").innerHTML = sortedBooks2
localStorage.setItem("booksArray",JSON.stringify(sortedBooks2))
}
function addBook() {
var test1 = localStorage.getItem("booksArray")
var addedBook = document.getElementById("inputData").value
var addedBook2 = JSON.parse(test1)
addedBook2.push(addedBook)
document.getElementById("display1").innerHTML = addedBook2
localStorage.setItem("booksArray", JSON.stringify(addedBook2))
}
function delBook() {
//if (document.getElementById("inputData").value.length > 0) {
var local = localStorage.getItem("booksArray")
var delItem = document.getElementById("inputData").value
var array = JSON.parse(local)
var x = array.indexof(delItem);
//test2.splice(delItem,1)
if (delItem != -1) {
delete booksArray[delItem]
}
document.getElementById("display1").innerHTML = test2
}
// my test function
/* function displaybooks() {
var test1 = localStorage.getItem("booksArray")
var test2 = JSON.parse(test1)
document.getElementById("display1").innerHTML = test2[2]
}
*/
function clearLocal() {
localStorage.clear()
}
</script>
...
<body>
<!--i need to make the page so onload it displays the books--->
<form>
<input type="text" id="inputData" />
</form>
<input type="button" onclick="delBook()" value="delete your books" />
<input type="button" onclick="sortBooks()" value="test me" />
<input type="button" onclick="addBook()" value="add your book" />
<input type="button" onclick="clearLocal()" value="clear local storage" />
<p id="display1"></p>
</body>
</html>
【问题讨论】：
标签： javascript arrays html local-storage