LocalStorage und JSON.JSON stringify.analysieren

Ich habe an einem Projekt arbeiten, ermöglicht es dem Benutzer zu senden Erinnerungen über einen Ort, den Sie besucht haben, und verfolgt die Lage, wenn der Speicher eingereicht wurde. Mein problem ist nur versuchen, zu verwenden "localStorage" mit der app habe ich gelesen, dass das JSON-Format.stringify und JSON.analysieren, und nicht verstehen, wie Sie in meinem code noch.

Dies ist mein form.js
Es verarbeitet das Formular und packt die text-Felder. Es gleicht die form, wenn die Taste "hinzufügen" (auf der display-Seite "details") oder geben Sie die details-Schaltfläche geklickt wird. Schließlich erhält die Informationen und sendet die Nachricht zurück an das Fenster.

function processForm(){

var locate = document.myform.locate.value;
var details = document.myform.details.value;
var storeData = []; 
localStorage.setItem("locate", JSON.stringify(locate));
localStorage.setItem("details", JSON.stringify(details));
alert("Saved: " + localStorage.getItem("locate") + ", and " + localStorage.getItem("details"));

var date = new Date,
    day = date.getDate(),
    month = date.getMonth() + 1,
    year = date.getFullYear(),
    hour = date.getHours(),
    minute = date.getMinutes(),
    ampm = hour > 12 ? "PM" : "AM";    
    hour = hour % 12;
    hour = hour ? hour : 12; //zero = 12
    minute = minute > 9 ? minute : "0" + minute;
    hour = hour > 9 ? hour : "0" + hour;

    date = month + "/" + day + "/" + year + " " + hour + ":" + minute +  " " + ampm;

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

storeData.push(locate, details, date);
localStorage.setItem("storeData", JSON.stringify(storeData));   
}

function clearForm(){
$('#myform').get(0).reset();
}

function retrieveFormInfo(){

var data = JSON.parse(localStorage.getItem("storeData"));   

var locate = JSON.parse(localStorage.getItem("locate"));
$("#locate2").html("Place: " + locate);

var details = JSON.parse(localStorage.getItem("details"));
$("#details2").html("Description: " + details);

var date = JSON.parse(localStorage.getItem("date"));
$("#date").html(date);

}

Aber das große problem, ich bin mit in ist ich weiß, wie zu übernehmen, dass Informationen korrekt über das JSON-Format.stringify und JSON.analysieren und anfügen an das Fenster mit html-Elementen dynamisch, vor allem wie eine Liste von Erinnerungen.

Jede Hilfe ist willkommen!

Poste den relevanten code hier Nächstes mal - siehe sscce.org für einige Ideen, wie man erstellen Sie eine nützliche Probe aus dem code. Haben Sie bereits setup ein array einmal in Ihrem code - storeData = [] und Elemente Hinzugefügt, um es - storeData.push(). Was Sie wahrscheinlich suchen, um zu tun, obwohl, ist ein Objekt verwenden, weil Sie wollen, einen Namen zu geben, um jeden Wert, die Sie hinzufügen - z.B. Datum, Stunde, minute. Sie können dies tun, indem Sie ein Objekt erstellen - store = {}, und dann hinzufügen von Eigenschaften, um es - store['date'] = ....

InformationsquelleAutor king_sw4 | 2014-05-19

Vanilla JS

var printStorageBody = function () {
    var body = document.querySelector("body");
    var pre = document.createElement("pre");
    body.innerHTML = "";
    pre.innerText = JSON.stringify(localStorage, null, '\t');
    body.appendChild(pre);
}

jQuery

var printStorageBody = function () {
    $("body").html("");
    $("<pre>")
    .text(JSON.stringify(localStorage, null, '\t'))
    .appendTo("body");
}

InformationsquelleAutor KhaledDev

12

localStorage speichert Schlüssel-Wert-Paare nur.

lassen Sie uns sagen, Sie haben ein array gespeichert werden mit jedem Element wird ein json-Objekt.

Du hast 2 Optionen:

Option 1:
- stringify jedes Element, und speichern Sie in locaStorage
```
var item = {input1: 'input1value', input2: 'input2value' };
localStorage.setItem( itemIndex, JSON.stringify(item) );
```
- ermittelt werden, um die Elemente zu iterieren über localStorage-Objekte umwandeln und dann den Artikel zu JSON-Objekt:
```
for(var i=0;i<localStorage.length; i++) {
  var key = localStorage.key( i );
  var item = JSON.parse( localStorage.getItem( key ) );
}
```
Option 2:
- stringify das gesamte array und speichern im "localStorage"
  
  localStorage.setItem( 'memoriesdata', JSON.stringify( arr ) );
- die Daten Lesen Lesen Sie das Element als string konvertieren von JSON-Objekt
  
  var arr = JSON.parse( localStorage.getItem('memoriesdata') );
InformationsquelleAutor gp.

Ersten get-Werte der input-Felder in ein javascript-Objekt.

var myMemory = {};
myMemory.location = document.getElementById('location').value;
myMemory.description = document.getElementById('description').value;

Nun save myMemory zu localStorage,kann dies auf eine form von Unterwerfung oder eine Taste drücken. Wir speichern kann als ein array von Erinnerungen und Element hinzufügen, um es jedes mal.

//if user already has memories in local, get that array and push into it.
//else create a blank array and add the memory.
memories = localStorage.getItem('memories') ?
              JSON.parse(localStorage.getItem('memories')) : 
              [];
memories.push(myMemory);
localStorage.setItem('memories', JSON.stringify(memories));

InformationsquelleAutor sabithpocker

Ich diese Storage Umsetzung. Es ist inspiriert von vielen storage-plugins die es gibt... Es kann jeden Wert serilizable von JSON.stringify Funktion und soll die Arbeit xbrowser (und in "cookie-deaktiviert' firefox):

//
//   api:
//
//.clear()    empties storage
//.each()     loops storage (key, value) pairs
//.fetch()    get a value by key
//.has()      checks if there is a key set
//.ls()       lists all keys 
//.raw()      string value actually stored
//.reload()   reads in serialized data
//.rm()       removes key(s)
//.set()      setup value(s)
//.type()     storage type used 'localStorage/globalStorage/userData'
//.valid()    is storage engine setup correctly
//
;
((function(name, def, glob, doc) {

  //add 'store' id to globals
  this[name] = def(glob, doc);
}).call(
  this, "store", function(glob, doc) {

    //private (function) store version
    var stclient;

    var driver = {
      //obj  : storage_native{},
      //type : storage_type
    };

    var engine = {
      //read  : (func),
      //write : (func)
    };

    var _ = {

      a: Array.prototype,
      del: function(node) { //, ...fields

        _.slc(arguments, 1).
        forEach(function(field) {
          delete this[field];
        }, node);

        return node;
      },
      each: function(array, callback, context) {

        context ||
          (context = array);

        array.
        some(function() {
          return false === callback.apply(context, arguments);
        });

        return array;
      },
      hasown: Function.prototype.call.bind(Object.prototype.hasOwnProperty),
      jsdc: JSON.parse, //decode
      jsec: JSON.stringify, //encode 
      keys: Object.keys, //shimed .keys
      ns: "storage5", //single property name to keep serialized storage data under
      object: null, //parsed storage data 
      slc: Function.prototype.call.bind(Array.prototype.slice),
      test: {

        isemptyobj: function(node) {
          for (var x in node)
            return false;
          return true;
        },

        isplainobj: function(node) {
          return '[object Object]' == Object.prototype.toString.call(node);
        },

      },
      testval: 'storage' + Math.random(), //test value for implementation check
      rig: function(target, items) {

        for (var field in items)
          if (items.hasOwnProperty(field))
            target[field] = items[field];

        return target;
      },
      clone: function(node) {
        return _.jsdc(_.jsec(node));
      },
      puts: function() {
        engine.write(_.jsec(_.object));
      },
    };

    stclient = function storage5() {
      return arguments.length ?
        storage5.set.apply(storage5, arguments) :
        storage5.fetch();
    };

    //_init on load|ready
    window.addEventListener('load', _init, false);

    return _.rig(stclient, {

      clear: function() {
        return _.object = {}, _.puts(), this;
      },

      each: function(callback, context) {

        context ||
          (context = this.fetch());

        _.each(this.ls(), function(field) {
          return callback.call(context, field, this.fetch(field));
        }, this);

        return this;
      },

      fetch: function(key) {
        return (arguments.length) ?
          _.object[key] : _.clone(_.object);
      },

      has: function(name) {
        return _.hasown(_.object, name);
      },

      ls: function() {
        return _.keys(_.object);
      },

      raw: function() {
        return engine.read();
      },

      reload: _load,

      rm: function() {

        _.del.apply(null, _.a.concat.apply([_.object], arguments));

        return _.puts(), this;
      },

      set: function(input, value) {

        var len = arguments.length;
        var flag = 1;

        if (len) {

          if (_.test.isplainobj(input)) {

            _.keys(input).
            forEach(function(field) {
              _.object[field] = input[field];
            });

          } else {

            if (1 < len)
              _.object[input] = value;
            else
              flag = 0;

          }

          flag && _.puts();

        }

        return this;
      },

      type: function() {
        return driver.type || null;
      },

      valid: function() {
        return !_.test.isemptyobj(driver);
      },

    });

    function _init() {

      var flag = 0;
      var stnative;

      if ("localStorage" in glob) {
        try {
          if ((stnative = glob["localStorage"])) {
            //inits localStorage 
            _initlocst(stnative, driver, engine);
            flag = 1;
          }
        } catch (e) {}
      }

      if (!flag) {

        if ("globalStorage" in glob) {
          try {
            if ((stnative = glob["globalStorage"])) {
              //inits globalStorage
              _initglobst(stnative, driver, engine);
              flag = 1;
            }
          } catch (e) {}
        }

        if (!flag) {
          //inits userDataStorage
          _initusrdatast(doc.createElement(_.ns), driver, engine);
        }
      }

      //parse serialized storage data
      _load();
    }

    function _initlocst(stnative, driver, engine) {

      stnative[_.testval] = _.testval;

      if (_.testval === stnative[_.testval]) {

        try {
          stnative.removeItem(_.testval);
        } catch (e) {
          try {
            delete stnative[_.testval];
          } catch (e) {}
        }

        driver.obj = stnative;
        driver.type = "localStorage";

        engine.read = function() {
          return driver.obj[_.ns];
        };

        engine.write = function(stringvalue) {
          driver.obj[_.ns] = stringvalue;
          return stringvalue;
        };

      }
    }

    function _initglobst(stnative, driver, engine) {

      var host = glob.location.hostname;

      driver.obj = (/localhost/i).test(host) ?
        stnative["localhost.localdomain"] : stnative[host];

      driver.type = "globalStorage";

      engine.read = function() {
        return driver.obj[_.ns];
      };

      engine.write = function(stringvalue) {
        driver.obj[_.ns] = stringvalue;
        return stringvalue;
      };

    }

    function _initusrdatast(node, driver, engine) {

      try {

        node.id = _.ns;
        node.style.display = "none";
        node.style.behavior = "url('#default#userData')";

        doc.
        getElementsByTagName("head")[0].
        appendChild(node);

        node.load(_.ns);

        node.setAttribute(_.testval, _.testval);
        node.save(_.ns);

        if (_.testval === node.getAttribute(_.testval)) {

          try {

            node.removeAttribute(_.testval);
            node.save(_.ns);

          } catch (e) {}

          driver.obj = node;
          driver.type = "userData";

          engine.read = function() {
            return driver.obj.getAttribute(_.ns);
          };

          engine.write = function(stringvalue) {
            driver.obj.setAttribute(_.ns, stringvalue);
            driver.obj.save(_.ns);
            return stringvalue;
          };

        }

      } catch (e) {
        doc.
        getElementsByTagName("head")[0].
        removeChild(node);
      }

      node = null;
    }

    function _load() {

      try {
        _.object = _.jsdc((engine.read() || engine.write("{}")));
      } catch (e) {
        _.object = {};
      }
    }

  }, window, document));

  //eof

InformationsquelleAutor public override

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.