Webstorage

Letzte Änderung: 26.01.2016

Umgesetzte Punkte

  • Html-Elementen lesen
  • Werte online berechnen
  • Html-Elementen verändern



webstorage.js

download
/**
 * @description Lokale Speicherung mittels Web Storage
 * Implementiert sind
 * \li Hinzufügen
 * \li Löschen
 * \li Alle löschen
 * \li Anzeigen
 * 
 * @author Thomas Thielemann www.th-thielemann.de
 */

// Format string with parameters
if (!String.prototype.format) {
  String.prototype.format = function() {
    var args = arguments;
    return this.replace(/{(\d+)}/g, function(match, number) { 
      return typeof args[number] != 'undefined' ? args[number] : match;
    });
  };
}

// Replace all matches in string
//if (!String.prototype.replaceAll) {
    String.prototype.replaceAll = function(search, replacement) {
        var target = this;
        return target.split(search).join(replacement);
    };
//}

// Update list of existing items
function updateItemList()
{
  var tableString = '
' + ' ' + ' {0}' + ' ' + '
' + '
' + '
' var rowString = '' + ' {0}' + ' {1}' + ' ' + ' ' + ' ' + ' ' var storage = window.localStorage; if (storage.getItem("notes.ids") === null) { return; } var idList = JSON.parse(storage.getItem("notes.ids")); var output = ""; for (var i = 0; i < idList.length; ++i) { var id = idList[i]; var date = new Date(storage.getItem("notes." + id + ".date")); var dateString = date.toISOString().substr(0,10) + "
" + date.toISOString().substr(11,8); var maskedText = storage.getItem("notes." + id + ".text"); output = output + rowString.format(dateString, maskedText, id); } document.getElementById("noteList").innerHTML = (idList.length !== 0) ? tableString.format(output) : ""; for (var i = 0; i < idList.length; ++i) { var buttonId = "noteDeleteItemButton{0}".format(idList[i]); document.getElementById(buttonId).onclick = deleteItem; // Add event handler } } // Add item to storage // Clears the input field too function addItem() { var content = document.getElementById("noteValue").value; if (content === 0) { return; } content = content.replaceAll(";", ""); content = content.replaceAll("&", "&"); content = content.replaceAll("\"", """); content = content.replaceAll("<", "<"); content = content.replaceAll(">", ">"); var storage = window.localStorage; var idList = []; var id = 0; if (storage.getItem("notes.ids") !== null) { idList = JSON.parse(storage.getItem("notes.ids")); id = parseInt(storage.getItem("notes.nextid")); } idList.push(id); storage.setItem("notes.nextid", id + 1); storage.setItem("notes." + id + ".text", content); storage.setItem("notes." + id + ".date", new Date().toISOString()); storage.setItem("notes.ids", JSON.stringify(idList)); document.getElementById("noteValue").value = ""; // Delete input field updateItemList(); } // Delete item from storage // \param event Event from click on delete button function deleteItem(event) { var id = -1; if (event.target.id.substring(0, 20) === "noteDeleteItemButton") { id = parseInt(event.target.id.substring(20)); } var storage = window.localStorage; if (storage.getItem("notes.ids") === null) { return; } var idList = JSON.parse(storage.getItem("notes.ids")); if (idList.indexOf(id) === -1) { return; } var trElement = document.getElementById("noteDeleteItemTr" + id); if (trElement) { trElement.parentNode.removeChild(trElement); } idList.splice(idList.indexOf(id), 1); storage.setItem("notes.ids", JSON.stringify(idList)); storage.removeItem("notes." + id + ".text"); storage.removeItem("notes." + id + ".date"); if (idList.length === 0) { // remove the complete table updateItemList(); } } // Delete all items from storage function deleteAll () { var storage = window.localStorage; if (storage.getItem("notes.ids") === null) { return; } var idList = JSON.parse(storage.getItem("notes.ids")); for (var i = 0; i < idList.length; ++i) { var id = idList[i]; storage.removeItem("notes." + id + ".text"); storage.removeItem("notes." + id + ".date"); } storage.setItem("notes.ids", JSON.stringify([])); // update the index at first updateItemList(); }




© 2003-2017 th-thielemann.de