SessionStorageとLocalStorageを使用すると、キーと値のペアをWebブラウザーに保存できます。値は文字列でなければならず、保存jsオブジェクトは簡単ではありません。

var user = {'name':'John'};
sessionStorage.setItem('user', user);
var obj = sessionStorage.user; // obj='[object Object]' Not an object

現在では、オブジェクトをJSONにシリアル化してから逆シリアル化してオブジェクトを復元することで、この制限を回避できます。ただし、ストレージAPIは常にsetItemおよびgetItemメソッドを通過します。

sessionStorage.setItem('user', JSON.stringify(user));
var obj = JSON.parse(sessionStorage.getItem('user')); // An object :D

この制限を回避できますか？

私はこのようなものを実行したいだけです：

sessionStorage.user.name; // 'John'
sessionStorage.user.name = 'Mary';
sessionStorage.user.name // 'Mary'

defineGetterとdefineSetterメソッドを使用して呼び出しをインターセプトしようとしましたが、すべてのプロパティを定義する必要があり、私の目標は将来のプロパティを知ることではないため、面倒な作業です。

Web Storage APIが提供するアクセサーを使用することも、ラッパー/アダプターを作成することもできます。defineGetter / defineSetterに関するあなたの述べられた問題から、ラッパー/アダプターを書くことはあなたにとってあまりに多くの仕事のように聞こえます。

正直言って何を言えばいいのか分かりません。「おかしな制限」とは何かについてのあなたの意見を再評価できるかもしれません。Web Storage APIは、本来あるべき姿であるキー/バリューストアです。

オブジェクトを「文字sessionStorage.setItem()列化」できませんか？次に、オブジェクトのその文字列表現を格納するために使用します...次に、それが必要なときsessionStorage.getItem()にそれを使用$.parseJSON()して戻すことができますか？

動作例http://jsfiddle.net/pKXMa/

解決策は、sessionStorageでsetItemを呼び出す前にオブジェクトを文字列化することです。

var user = {'name':'John'};
sessionStorage.setItem('user', JSON.stringify(user));
var obj = JSON.parse(sessionStorage.user);

これは、オブジェクトを含むすべての値タイプで機能する動的ソリューションです。

class Session extends Map {
  set(id, value) {
    if (typeof value === 'object') value = JSON.stringify(value);
    sessionStorage.setItem(id, value);
  }

  get(id) {
    const value = sessionStorage.getItem(id);
    try {
      return JSON.parse(value);
    } catch (e) {
      return value;
    }
  }
}

次に：

const session = new Session();

session.set('name', {first: 'Ahmed', last : 'Toumi'});
session.get('name');

使用事例：

 sesssionStorage.setObj(1,{date:Date.now(),action:'save firstObject'});
 sesssionStorage.setObj(2,{date:Date.now(),action:'save 2nd object'}); 
 //Query first object
  sesssionStorage.getObj(1)
  //Retrieve date created of 2nd object
  new Date(sesssionStorage.getObj(1).date)

API

Storage.prototype.setObj = function(key, obj) {

        return this.setItem(key, JSON.stringify(obj))
    };
    
    Storage.prototype.getObj = function(key) {
        return JSON.parse(this.getItem(key))
    };

ページのリロード後に再構築できない関数リテラル（読み取りクロージャ）が含まれている可能性があるため、セッションストレージは任意のオブジェクトをサポートできません。

    var user = {'name':'John'};
    sessionStorage['user'] = JSON.stringify(user);
    console.log(sessionStorage['user']);

クロスブラウザ機能を備えたストアライブラリを使用することもできます。

例：

// Store current user
store.set('user', { name:'Marcus' })

// Get current user
store.get('user')

// Remove current user
store.remove('user')

// Clear all keys
store.clearAll()

// Loop over all stored values
store.each(function(value, key) {
    console.log(key, '==', value)
})

セッションストレージからオブジェクトを保存および取得するための2つのラッパーメソッドを作成できます。

function saveSession(obj) {
  sessionStorage.setItem("myObj", JSON.stringify(obj));
  return true;
}

function getSession() {
  var obj = {};
  if (typeof sessionStorage.myObj !== "undefined") {
    obj = JSON.parse(sessionStorage.myObj);
  }
  return obj;
}

これを次のように使用します。-オブジェクトを取得し、一部のデータを変更して、保存し直します。

var obj = getSession();

obj.newProperty = "Prod"

saveSession(obj);