如何set/get/save 会话存储中的数据？

Question

这是我在 ajax 呼叫响应成功后获得的数据示例 obj.DATA 如下所示：

{
  "A43D": {
    "FIRSTNAME": "Mike",
    "EMAIL": "mjohns@gmail.com",
    "LASTNAME": "Johns"
  },
  "4E83": {
    "FIRSTNAME": "Steve",
    "EMAIL": "scook@gmail.com",
    "LASTNAME": "Cook"
  }
}

$.ajax({
   type: 'POST',
   url: 'AjaxFunctions.cfc?method=getCustomers',
   data: formData,
   dataType: 'json'
}).done(function(obj){
   console.log(obj.DATA);
   sessionStorage.setItem("customersData", JSON.stringify(obj.DATA));      
}).fail(function(jqXHR, textStatus, errorThrown){
   alert('Error: '+errorThrown);
});

然后我将 sessionStorage 转储到 console.log(sessionStorage) 中，我看到了这个：

{
  "customersData": "{\"A43D\":{\"FIRSTNAME\":\"Mike\",\"EMAIL\":\"mjohnes@gmail.com\",\"LASTNAME\":\"Johnes\"},\"4E83\":{\"FIRSTNAME\":\"Steve\",\"EMAIL\":\"scook@gmail.com\",\"LASTNAME\":\"Cook\"}}"
}

所以我接下来要尝试：

sessionData = sessionStorage.hasOwnProperty(customersData[recordID]) ? JSON.parse(sessionStorage.getItem(customersData[recordID])) : null;

这是在我传递记录 ID 然后尝试访问会话存储中的记录的函数中。如果我尝试 console.log(sessionData)，我看到的只是 null。我想知道如何访问会话存储中 customersData 对象中的特定键？另外，我将如何 insert/edit 在 sessionStorage customersData 对象中记录？

Answer 1

每次您尝试 save/load localStorage/sessionStorage 的东西并且您知道它是一个 json 对象时，总是 stringify/parse 它视情况而定。

此处您的代码已修复，可以正常工作了。

注意：我尝试创建一个片段，但没有成功，因为我们无法访问沙箱的 sessionStorage。

注意 2： 始终检查您要解析的数据，如果记录不存在于存储中，它将 return null。

var data = {
  "A43D": {
    "FIRSTNAME": "Mike",
    "EMAIL": "mjohns@gmail.com",
    "LASTNAME": "Johns"
  },
  "4E83": {
    "FIRSTNAME": "Steve",
    "EMAIL": "scook@gmail.com",
    "LASTNAME": "Cook"
  }
}

//here we save the item in the sessionStorage.
sessionStorage.setItem("customersData", JSON.stringify(data));


//now we retrieve the object again, but in a string form.
var customersDataString = sessionStorage.getItem("customersData");
console.log(customersDataString);

//to get the object we have to parse it.
var customersData = JSON.parse(customersDataString);
console.log(customersData);

Answer 2

以下是我的处理方法，
通过使用方法创建一些 customersStorage 对象，例如 get、set 和 add

jsFiddle demo

var customersStorage = {
    // Get all or single customer by passing an ID
    get: function( id ) {
        var parsed = JSON.parse(sessionStorage.customersData || "{}");
        return id ? parsed[id] : parsed;
    },
    // Set all
    set: function( obj ) {
        return sessionStorage.customersData = JSON.stringify(obj || {});
    },
    // Add single customer and store
    add: function( id, obj ) {
        var all = this.get();
        // Make sure customer does not exists already;
        if(all.hasOwnProperty(id)) return console.warn(id+ " exists!");
        all[id] = obj;
        return this.set(all);
    }
};

// Let's play!

// Store All
customersStorage.set({
  "A43D": {
    "FIRSTNAME": "Mike",
    "EMAIL": "mjohns@gmail.com",
    "LASTNAME": "Johns"
  },
  "4E83": {
    "FIRSTNAME": "Steve",
    "EMAIL": "scook@gmail.com",
    "LASTNAME": "Cook"
  }
});

// Get single
console.log( customersStorage.get("4E83") );

// Add new 
customersStorage.add("AAA0", {
  "FIRSTNAME": "Espresso",
  "LASTNAME": "Coffee",
  "EMAIL": "espresso@coffee.com"
});

// Get all
console.log( customersStorage.get() );

此外，为了使您的会话处理对象更 "client" 不可知，我将扩展它以通过 namespace[=30 处理更多数据=]:

如何set/get/save 会话存储中的数据？

How to set/get/save data in session storage?

javascript

jquery

session-storage

local-storage

sessionstorage