0
Я пытаюсь создать массив, который сохраняется в локальном хранилище, и пользователь может сортировать элементы, добавлять элемент, удалять элемент и очищать локальное хранилище. У меня много проблем с получением пользовательского ввода для удаления или сращивания. Кто-то может предоставить мне некоторые советы.проблема с удалением пользовательского ввода
Это код, который я до сих пор прошу простить, если он плох, определенно заинтересован в том, как его можно улучшить.
...
<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>