web-dev-qa-db-fra.com

LocalStorage et JSON.stringify JSON.parse

J'ai travaillé sur un projet qui permet à l'utilisateur de soumettre des souvenirs d'un lieu visité et de suivre le lieu où la mémoire a été soumise. Mon seul problème est d'essayer d'utiliser localStorage avec l'application. J'ai lu des informations sur JSON.stringify et JSON.parse et je ne comprends pas encore comment les utiliser dans mon code. 

Ceci est mon formulaire.js Il traite le formulaire et saisit les champs de texte. Il efface le formulaire lorsque l'utilisateur clique sur le bouton Ajouter (sur la page de détails de l'affichage) ou sur le bouton Entrer les détails. Enfin, il reçoit les informations et renvoie le message à la fenêtre.

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);

}

Mais le problème majeur que je rencontre est que je sais comment intégrer correctement ces informations en utilisant JSON.stringify et JSON.parse et en les ajoutant à la fenêtre avec des éléments HTML dynamiquement, essentiellement comme une liste de mémoires.

Toute aide est appréciée! 

javascriptjqueryjsonhtml5
6
king_sw4

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");
}
2
KhaledDev

Commencez par récupérer les valeurs de vos champs de saisie dans un objet javascript.

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

Enregistrez maintenant myMemory sur localStorage. Vous pouvez le faire en soumettant un formulaire ou en appuyant sur un bouton. Nous pouvons stocker un ensemble de mémoires et y ajouter des éléments à chaque fois.

//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));
3
sabithpocker

J'utilise cette implémentation Storage. Il est inspiré par de nombreux plugins de stockage ... Il gère toutes les valeurs lisibles par la fonction JSON.stringify, et devrait fonctionner avec xbrowser (et dans Firefox avec "cookie-disabled"):

//
//    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
2
public override