【问题标题】:LocalStorage and JSON.stringify JSON.parseLocalStorage 和 JSON.stringify JSON.parse
【发布时间】:2014-07-06 21:00:00
【问题描述】:

我一直在从事一个项目,该项目允许用户提交有关他们访问过的地方的记忆并跟踪提交记忆的位置。我唯一的问题是尝试在应用程序中使用 localStorage,我阅读了 JSON.stringify 和 JSON.parse,但还不明白如何在我的代码中使用它们。

这是我的 form.js 它处理表单并获取文本字段。当单击添加按钮(在显示详细信息页面上)或输入详细信息按钮时,它会清除表单。最后它接收到信息并将消息发送回窗口。

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

}

但我遇到的主要问题是我确实知道如何正确使用 JSON.stringify 和 JSON.parse 获取该信息,并将其动态附加到带有 html 元素的窗口,主要像记忆列表。

感谢任何帮助!

【问题讨论】:

  • 下次在此处发布相关代码 - 请参阅 sscce.org 了解如何从您的代码中创建有用示例的一些想法。您已经在代码中设置了一次数组 - storeData = [],并向其中添加了元素 - storeData.push()。不过,您可能想要做的是使用一个对象,因为您想为要添加的每个值命名 - 例如日期、小时、分钟。为此,您可以创建一个对象 - store = {},然后向其添加属性 - store['date'] = ...

标签: javascript jquery json html


【解决方案1】:

localStorage 仅将键值对存储为字符串(键也可以是整数)。

存储对象是简单的键值存储,类似于对象,但 它们通过页面加载保持不变。键可以是字符串或 整数,但 values are always strings

假设您有一个要存储的数组,其中每个项目都是一个 json 对象。

你有两个选择:

选项 1:

  • 字符串化每个项目并存储在 locaStorage 中
var item = {input1: 'input1value', input2: 'input2value' };
localStorage.setItem( itemIndex, JSON.stringify(item) );
  • 要检索项目迭代 localStorage 项目,然后将项目转换为 JSON 对象:
for(var i=0;i<localStorage.length; i++) {
  var key = localStorage.key( i );
  var item = JSON.parse( localStorage.getItem( key ) );
}

选项 2:

  • 字符串化整个数组并存储在localStorage中

    localStorage.setItem( 'memoriesdata', JSON.stringify( arr ) );
    
  • 要读取数据,将项目读取为字符串,然后转换为 JSON 对象

    var arr = JSON.parse( localStorage.getItem('memoriesdata') );
    

【讨论】:

  • 谢谢!最后一种方法非常有用!
【解决方案2】:

首先将输入字段的值放入 javascript 对象中。

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

现在将 myMemory 保存到 localStorage,这可以通过提交表单或按下按钮来完成。我们可以存储为一个内存数组,并且每次都向其中添加项目。

//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】:

    我使用这个Storage 实现。它受到许多存储插件的启发......它可以处理JSON.stringify 函数可序列化的任何值,并且应该可以在 xbrowser 中运行(以及在 'cookie-disabled' 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
    

    【讨论】:

      【解决方案4】:

      原版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");
      }
      

      【讨论】:

        猜你喜欢
        • 2018-03-10
        • 1970-01-01
        • 2015-01-25
        • 2022-01-25
        • 2015-06-29
        • 1970-01-01
        • 2011-11-01
        • 2021-04-16
        相关资源
        最近更新 更多