web-dev-qa-db-ja.com

JavascriptオブジェクトをsessionStorageに保存します

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メソッドを使用して呼び出しをインターセプトしましたが、すべてのプロパティを定義する必要があり、ターゲットは将来のプロパティを知ることができないため、退屈な仕事です。

javascriptsession-storage
130
Ferran Basora

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

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

17
Ryan Olds

オブジェクトを「文字列化」することはできません...その後、オブジェクトの文字列表現を保存するためにsessionStorage.setItem()を使用します...その後、必要なときにsessionStorage.getItem()を使用してから$.parseJSON()を使用して、オブジェクトを取得しますか？

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

101
afreeland

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

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

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

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');
7
Abdennour TOUMI

使用事例：

 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))
    };
5
Abdennour TOUMI

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

4
Igor Urisman
    var user = {'name':'John'};
    sessionStorage['user'] = JSON.stringify(user);
    console.log(sessionStorage['user']);
3
Jijo Paulose

store library を使用することもできます。これは、クロスブラウザ機能を使用して実行します。

例：

// 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
3Dos