html5 输入框记忆,使用HTML5 Web Storage API实现的可记忆用户搜索选项

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

window.onload = init;

function init() {

var button = document.getElementById("add_button");

button.onclick = AddToSearch;

var clearButton = document.getElementById("clear_button");

clearButton.onclick = clearSearchItems;

var searchItemsArray = getSearchItems();

for (var i = 0; i < searchItemsArray.length; i++) {

var key = searchItemsArray[i];

var value = JSON.parse(localStorage[key]);

addSearchItemToDOM(key, value);

}

}

function getSearchItems() {

var searchItemsArray = localStorage.getItem("searchItemsArray");

if (!searchItemsArray) {

searchItemsArray = [];

localStorage.setItem("searchItemsArray", JSON.stringify(searchItemsArray));

} else {

searchItemsArray = JSON.parse(searchItemsArray);

}

return searchItemsArray;

}

function AddToSearch() {

if (!window["localStorage"]) {

alert("No local storage support");

//you can put alternate code here

return false;

}

var searchItemsArray = getSearchItems();

var value = document.getElementById("note_text").value;

if (value != "") {

var currentDate = new Date();

var key = "Item_" + currentDate.getTime();

var ItemObj = {

"value": value

};

localStorage.setItem(key, JSON.stringify(ItemObj));

searchItemsArray.push(key);

localStorage.setItem("searchItemsArray", JSON.stringify(searchItemsArray));

addSearchItemToDOM(key, ItemObj);

document.getElementById("note_text").value = "";

} else {

alert("Enter Search Item");

}

}

function deleteSearchItem(e) {

var key = e.target.id;

if (e.target.tagName.toLowerCase() == "span") {

key = e.target.parentNode.id;

}

var searchItemsArray = getSearchItems();

if (searchItemsArray) {

for (var i = 0; i < searchItemsArray.length; i++) {

if (key == searchItemsArray[i]) {

searchItemsArray.splice(i, 1);

}

}

localStorage.removeItem(key);

localStorage.setItem("searchItemsArray", JSON.stringify(searchItemsArray));

removeItemFromDOM(key);

}

}

function addSearchItemToDOM(key, ItemObj) {

var searchItems = document.getElementById("searchItems");

var Item = document.createElement("li");

Item.setAttribute("id", key);

var span = document.createElement("span");

span.setAttribute("class", "Item");

span.innerHTML = ItemObj.value;

Item.appendChild(span);

searchItems.appendChild(Item);

Item.onclick = deleteSearchItem;

}

function removeItemFromDOM(key) {

var Item = document.getElementById(key);

Item.parentNode.removeChild(Item);

}

function clearSearchItems() {

localStorage.clear();

var ItemList = document.getElementById("searchItems");

var searchItems = ItemList.childNodes;

for (var i = searchItems.length - 1; i >= 0; i--) {

ItemList.removeChild(searchItems[i]);

}

var searchItemsArray = getSearchItems();

}