Simpan objek Javascript di sessionStorage

152

SessionStorage dan LocalStorage memungkinkan untuk menyimpan pasangan kunci / nilai di browser web. Nilai harus berupa string, dan menyimpan objek js tidak sepele.

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

Saat ini, Anda dapat menghindari batasan ini dengan membuat serialisasi objek ke JSON, dan kemudian membatalkan deserialisasi untuk memulihkan objek. Tetapi API Penyimpanan selalu melewati setItemdan getItemmetode.

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

Bisakah saya menghindari batasan ini?

Saya hanya ingin menjalankan sesuatu seperti ini:

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

Saya telah mencoba defineGetterdan defineSettermetode untuk mencegat panggilan tetapi itu pekerjaan yang membosankan, karena saya harus mendefinisikan semua properti dan target saya bukan untuk mengetahui properti masa depan.

Ferran Basora
sumber
1
Saya sudah memikirkannya sendiri. Saya kira banyak orang memilikinya. Tapi saya tidak berpikir metode pengambil dan penyetel terlalu banyak menjadi beban. BTW; Anda dapat membuat cerita bersambung dan parse dengan JavaScript dan MS akhirnya mendukung objek standar yang sama seperti orang lain. Hari-hari kebutuhan paket seperti JSON dan jQuery akan segera berakhir.
Roger F. Gay
1
Saya kira saya tidak melihat batasannya. Mungkin terlihat seperti berlebihan untuk menggunakan JSON.stringify dan JSON.parse jika Anda hanya pernah memiliki objek sepele, tetapi jika Anda bahkan memiliki objek data berukuran baik, kedua metode ini melakukan banyak pekerjaan untuk Anda.
Robusto
5
"Bisakah aku menghindari batasan ini?" sepertinya pertanyaan
sonicblis
1
Keterbatasan baik atau tidak, pertanyaan ini membantu saya memecahkan masalah, jadi terima kasih.
Matt West

Jawaban:

19

Entah Anda dapat menggunakan pengakses yang disediakan oleh Web Storage API atau Anda bisa menulis pembungkus / adaptor. Dari masalah yang Anda nyatakan dengan defineGetter / defineSetter terdengar seperti menulis bungkus / adaptor terlalu banyak bekerja untuk Anda.

Sejujurnya aku tidak tahu harus berkata apa. Mungkin Anda bisa mengevaluasi kembali pendapat Anda tentang apa itu "batasan konyol". API Penyimpanan Web adalah apa yang seharusnya, toko kunci / nilai.

Ryan Olds
sumber
8
Maaf jika saya menggunakan kata yang tidak pantas dengan 'konyol'. Gantilah dengan 'bisa sangat menarik'. Saya pikir webStorage adalah salah satu peningkatan paling menarik dari web baru. Tetapi hanya menyimpan string dalam key-map nilai yang saya pikir merupakan batasan. Sepertinya sekuel cookie. Saya tahu bahwa Storage adalah spesifikasi bukan hanya untuk bahasa Javascript, tetapi objek bersambung bisa menjadi peningkatan yang menarik. Bagaimana menurut anda?
Ferran Basora
2
Jika JSON tidak cukup, Anda selalu bisa menulis metode serialisasi objek Anda sendiri.
Ryan Olds
110

Tidak bisakah Anda 'merangkai' objek Anda ... lalu gunakan sessionStorage.setItem()untuk menyimpan representasi string objek Anda ... lalu ketika Anda membutuhkannya sessionStorage.getItem()dan kemudian gunakan $.parseJSON()untuk mengeluarkannya kembali?

Contoh kerja http://jsfiddle.net/pKXMa/

afreeland
sumber
Ini bekerja untuk saya. Saya mendapatkan objek Json yang berfungsi setelah memanggil $ .parseJSON ()
Olafur Tryggvason
Beberapa sistem seperti otentikasi Web Api mengembalikan objek dalam bentuk Object {propertyOneWithoutQuotes: "<value1>", ... propertyNWithoutQuotes: "<valueN>"} yang perlu melalui "stringify". Jika ada banyak sumber, mungkin lebih baik menggunakan stringify untuk membakukan data.
Jelgab
Ini jawaban yang sangat bagus. Adalah baik untuk menggunakan JSON.stringify () untuk membuat serialisasi objek dan menyimpannya di sessionStorage. Kemudian, ia menggunakan $ .parseJSON () untuk menghapus serialisasi string untuk mendapatkan objek.
Thomas.Benz
102

Solusinya adalah dengan mengencangkan objek sebelum memanggil setItem pada sessionStorage.

var user = {'name':'John'};
sessionStorage.setItem('user', JSON.stringify(user));
var obj = JSON.parse(sessionStorage.user);
Ron
sumber
Terima kasih karena tidak mengaitkan solusinya
Luc-Olsthoorn
12

Ini adalah solusi dinamis yang bekerja dengan semua tipe nilai termasuk objek:

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

Kemudian :

const session = new Session();

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

Gunakan kasus:

 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))
    };
Abdennour TOUMI
sumber
4
Saya pikir salah satu praktik terbaik dalam javascript adalah untuk tidak membuat prototipe objek yang tidak Anda miliki. Menggunakan Storage.prototype.setObj sepertinya ide yang buruk.
britztopher
3
cukup tambahkan kewajiban .. pastikan Anda tidak menambahkan kode prototipe ini - dan andalkan secara eksklusif - tanpa terlebih dahulu memeriksa apakah browser mendukungnya. Storage:if (typeof (Storage) !== "undefined"){ /* browser supports it */ }
JoeBrockhaus
4

Penyimpanan sesi tidak dapat mendukung objek sewenang-wenang karena mungkin berisi fungsi literal (penutupan baca) yang tidak dapat direkonstruksi setelah pemuatan ulang halaman.

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

Anda juga bisa menggunakan perpustakaan toko yang melakukannya untuk Anda dengan kemampuan crossbrowser.

contoh:

// 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)
})
3Dos
sumber
0

Anda dapat membuat 2 metode pembungkus untuk menyimpan dan mengambil objek dari penyimpanan sesi.

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

Gunakan seperti ini: - Dapatkan objek, modifikasi beberapa data, dan simpan kembali.

var obj = getSession();

obj.newProperty = "Prod"

saveSession(obj);
JerryGoyal
sumber