Menyimpan dan mendapatkan semula objek JavaScript dalam localStorage

Ditulis oleh Nelson Michael✏️

Nota editor: Artikel ini dikemas kini kali terakhir oleh Rahul Chhodde pada 7 Ogos 2024 untuk menawarkan penerokaan yang lebih mendalam tentang menyimpan objek dalam localStorage, seperti teknik untuk mensirikan objek JavaScript menggunakan JSON.stringify, dan situasi di mana bekerja dengan dan menyimpan berbilang objek dalam localStorage adalah perlu.

API Storan Web menyediakan mekanisme berasaskan JavaScript untuk menyimpan dan mengakses data dengan selamat sebagai pasangan nilai kunci dalam penyemak imbas pelanggan. Ini berguna untuk menyimpan data tidak sensitif seperti pilihan pengguna, keadaan aplikasi dan juga respons API dalam beberapa kes.

Dua mekanisme API Storan Web, localStorage dan sessionStorage, membolehkan pembangun menyimpan data secara berterusan dan sementara. Data yang disimpan ini boleh diperoleh dengan mudah kemudian dan digunakan untuk memudahkan pengguna.

Dalam artikel ini, kita akan belajar cara merangkai dan menghuraikan objek JavaScript ke dalam rentetan JSON untuk menyimpannya dalam localStorage, dan kemudian membalikkan proses untuk mendapatkan semula data. Kami juga akan membincangkan secara ringkas perbezaan utama antara localStorage, sessionStorage dan kuki HTTP, menyerlahkan faedah dan kelemahan menggunakan localStorage berbanding dua yang lain.

Apakah localStorage?

Objek localStorage ialah salah satu daripada dua mekanisme Storan Web yang membenarkan pembangun menyimpan data pada penyemak imbas pelanggan yang berterusan walaupun selepas tetingkap penyemak imbas ditutup. Data yang disimpan ini boleh diakses di seluruh domain tertentu menggunakan kaedah API yang mudah digunakan, beberapa daripadanya ditunjukkan di bawah:

localStorage.setItem("myDataKey", "My data");
localStorage.getItem("myDataKey"); // "My data"
localStorage.removeItem("myDataKey");

Perhatikan bahawa data yang disimpan dalam objek localStorage daripada domain hanya boleh diakses atau diubah suai oleh halaman asal yang sama, yang — dalam kes ini — bermaksud protokol, domain dan port secara kolektif. Anda boleh mengesahkan tingkah laku ini menggunakan kaedah ini dalam konsol pembangun penyemak imbas anda.

Menurut W3Schools, objek localStorage menyimpan data tanpa tarikh tamat tempoh. Data tidak akan dipadamkan walaupun apabila pengguna meninggalkan halaman atau menutup tetingkap penyemak imbas; ia akan tersedia untuk sesi akan datang. Keupayaan untuk menyimpan data ini dikenali sebagai kegigihan data dalam pembangunan perisian dan web.

Menggunakan sessionStorage lwn localStorage

Mekanisme Storan Web kedua, sessionStorage, hampir sama dengan localStorage tetapi berbeza dalam dua cara: ia menyimpan data buat sementara waktu untuk tab yang ditentukan (atau semasa) dan berbuat demikian untuk tempoh terhad sahaja.

Objek sessionStorage kekal aktif selagi tab yang sepadan dibuka dan mengekalkan data melalui muat semula halaman dan pemulihan. Apabila halaman web dimuatkan ke dalam tab penyemak imbas, sessionStorage, jika digunakan, mencipta sesi halaman baharu dan menetapkannya pada tab itu. Sesi halaman itu hanya sah untuk asal tertentu yang diakses dalam tab khusus itu.

Nota: Data yang disimpan dalam setiap jenis Storan Web adalah berbeza untuk setiap protokol halaman tertentu. Ini bermakna data yang disimpan pada tapak yang diakses melalui HTTP disimpan pada objek sessionStorage yang berbeza daripada data yang disimpan di tapak yang sama yang diakses melalui HTTPS.

Perbezaan utama antara sessionStorage dan localStorage

localStorage dan sessionStorage berfungsi sama, tetapi perbezaan utama ialah data yang disimpan dalam localStorage adalah berterusan, dikongsi antara tab asal yang sama dan kekal selama-lamanya untuk asal khusus tersebut melainkan storan penyemak imbas dikosongkan atau kami mengosongkan localStorage menggunakan JavaScript atau secara manual.

Menggunakan Chrome DevTools, anda boleh melihat data dalam objek localStorage dan sessionStorage serta memerhatikan perbezaan yang baru kami bincangkan. Berikut ialah tangkapan skrin yang menggambarkan lokasi kedua-dua objek dalam tab Aplikasi DevTools:

Untuk menyimpan dan menggunakan semula maklumat seperti pilihan pengguna, keadaan aplikasi, respons API dan sebahagian besar data untuk memudahkan persepsi prestasi, kami memilih localStorage berbanding sessionStorage, kerana maklumat ini harus berterusan untuk digunakan sekali-sekala untuk memperibadikan dan mengemas kini pengalaman pengguna .

Nota: Apabila tab peribadi terakhir ditutup, data yang disimpan dalam objek localStorage tapak yang dibuka dalam tab peribadi atau mod inkognito dikosongkan, yang masuk akal kerana ia adalah sesi penyemakan imbas peribadi.

Storan Web lwn. kuki HTTP

Kuki HTTP ialah mekanisme konvensional untuk menyimpan bit kecil data yang ditukar antara klien dan pelayan semasa setiap permintaan HTTP.

Setelah disambungkan kepada pelanggan, pelayan menjana bit maklumat tertentu, menyimpannya dalam fail kuki dan menghantarnya ke penyemak imbas pelanggan. Maklumat ini dilabelkan dengan ID unik untuk setiap pengguna dan komputer mereka, yang membantu pelayan mengenal pasti pengguna apabila sambungan dibuat.

Kuki membawa maklumat seperti data pengesahan dan sesi, token CSRF, data penjejakan dan pilihan pengguna khusus tapak yang kecil untuk membantu memperibadikan pengalaman pengguna. Walau bagaimanapun, mereka boleh menjadi mimpi ngeri privasi. Kami akan membincangkan perkara ini dalam segmen berikut.

Mengapa dan bila menggunakan kuki?

Kuki bukanlah penyelesaian yang disyorkan untuk menyimpan volum data yang lebih besar di sisi pelanggan. Mereka lebih sesuai untuk pengurusan sesi dan merupakan salah satu penyelesaian yang paling banyak disokong untuk berbuat demikian.

Dengan setiap permintaan, kuki dihantar ke pelayan dalam pengepala HTTP daripada penyemak imbas, berbanding menggunakan localStorage atau sessionStorage, yang hanya diakses oleh aplikasi sebagai storan data sebelah klien dan terbuka kepada kelemahan.

Untuk keselamatan sesi, kuki yang ditandakan sebagai Selamat dan HttpOnly boleh meminimumkan kemungkinan rampasan sesi, mengehadkan serangan XSS (skrip merentas tapak) dan CSRF (pemalsuan permintaan silang) pada penyemak imbas pengguna semasa sesi.

Bila tidak menggunakan kuki

Kuki HTTP telah menjadi piawaian lama dan memastikan apl anda 100% bebas kuki tidak selalu dapat dilakukan. Walau bagaimanapun, terdapat beberapa kes yang anda mungkin mahu mengelakkannya:

• Kuki sepatutnya dihantar dengan setiap permintaan yang dibuat kepada pelayan, itulah sebabnya ia disimpan kecil dan tidak boleh menyimpan data melebihi 4KB. Ini menjadikan mereka tidak sesuai untuk menyimpan nilai besar seperti data keutamaan pengguna yang besar, keadaan aplikasi, dokumen yang dikarang pengguna, dll.
• Kuki pihak ketiga menimbulkan kebimbangan privasi yang serius, kerana tapak yang anda lawati tidak mencipta atau memilikinya. Kuki sedemikian biasanya dikaitkan dengan penjejakan data pengguna, yang menyebabkan mereka disyaki dan banyak penyemak imbas sedang bersedia untuk menyekatnya untuk melindungi privasi pengguna

Mata ini membolehkan kami menyimpan timbunan data tidak sensitif kami dalam localStorage. Situasi sebegini sering menuntut penjimatan data kompleks seperti objek JavaScript secara setempat, yang memerlukan pendekatan yang sedikit berbeza.

Bagaimana untuk menyimpan objek JavaScript dalam localStorage

Apl web moden sering menuntut untuk menyimpan objek JavaScript secara setempat untuk menyediakan akses luar talian, memulihkan keadaan aplikasi atau cache respons API untuk faedah prestasi yang dirasakan.

Perhatikan bahawa data tersebut tidak seharusnya membawa maklumat sensitif, kerana setelah disimpan dalam Storan Web, ia boleh diakses oleh mana-mana kod JavaScript yang dijalankan pada asal yang sama.

Mari kita mulakan dengan memperoleh pemahaman asas tentang cara bekerja dengan localStorage dengan meneroka kaedah dan sifatnya untuk pelbagai kes penggunaan:

• setItem(): Menambah data pada objek Storan Web menggunakan dua argumennya, kunci dan nilai: localStorage.setItem("key", "value")
• getItem(): Mengembalikan nilai nama kunci yang dihantar kepadanya: localStorage.getItem("kunci")
• **removeItem()**: Mengalih keluar kunci yang dihantar kepadanya dengan nilai yang sepadan: localStorage.removeItem("key")
• clear(): Membersihkan semua pasangan nilai kunci dalam storan yang berkaitan dan harus digunakan dengan berhati-hati: localStorage.clear()
• **key()**: Mengembalikan kunci pada indeks yang ditentukan dalam storan: localStorage.key(0)
• panjang: Mengembalikan jumlah bilangan pasangan nilai kunci yang disimpan dalam storan yang berkaitan: localStorage.length

Anda boleh mengetahui lebih lanjut tentang kaedah ini pada dokumen API Storan Web MDN.

Contoh di bawah menunjukkan ketekunan data yang dicapai menggunakan beberapa kaedah API Storan Web ini. Klik butang Kiraan semasa, jalankan semula CodePen dan lihat data kiraan berterusan menggunakan localStorage:

Lihat Pen localStorage beraksi oleh Rahul (@_rahul) di CodePen.

Dalam demo di atas, apabila anda mengklik kiraan atau butang kosongkan, berbilang item Storan setempat dibuat, dibaca atau diubah suai dan perubahan pada nilai yang sepadan ditunjukkan dalam bahagian hadapan.

siri objek JavaScript

Menyimpan data objek JavaScript dalam Storan Web agak rumit, kerana ia membolehkan anda menyimpan hanya nilai rentetan. Jika kami cuba menyimpan objek JavaScript tanpa terlebih dahulu menukarnya kepada rentetan, kami akan mendapat respons [objek Objek], seperti yang ditunjukkan dalam imej di bawah:
[objek Objek] ialah perwakilan rentetan bagi tika objek yang nilainya tidak pernah dibaca pada masa menyimpan data, yang akan mengakibatkan kehilangan data.

The correct way to store object data to localStorage is to first convert it to a string. Then, we can move on to the storage procedure.

This object-to-string conversion of object data is known as serialization, and turning this converted string back to object data is called deserialization. Let’s briefly discuss two important JSON methods that are responsible for object data serialization and deserialization:

• JSON.stringify: Converts any object value into a string JSON (serialization)
• JSON.parse: Turns a JSON string into its corresponding object or value (deserialization)

Now, utilizing the setItem method with JSON stringify, we can easily convert a JavaScript object to a JSON string and push it to the localStorage object. Here’s a quick example to demonstrate this:

const userObj = {
  name: "John Doe",
  age: 32,
  gender: "Male",
  profession: "Optician" 
};

localStorage.setItem("userObj", JSON.stringify(myObject));

Now, if we try to retrieve the object data without deserializing it, we will receive a JSON string instead of an object, which makes sense, as it is what we stored to localStorage.

We need to deserialize this JSON string data using the JSON parse method to turn it back into a JavaScript object:

let newObject = localStorage.getItem("myObject");
console.log(JSON.parse(newObject));

Here, we retrieved our previously set JavaScript object using the getItem method on the localStorage object and saved it into a variable. Next, we parsed that string into a JavaScript object and finally logged it to the console:

More examples of storing objects in localStorage

• Storing Date objects: Constructing an object using the current timestamp using the Date object and a random value, and saving it to or clearing it from the localStorage using button inputs
• Persisting remote data: Fetching remote data from a dummy API and storing it in localStorage; the network fetch in this example is only triggered when no associated data in localStorage is found

Storing multiple objects in localStorage

Let’s say we have a bunch of similar objects, and we want to group all of them and store them as one JSON string in the localStorage. We can turn them into an object array and then serialize them as shown below:

const todos = [todo1, todo2, todo3];
localStorage.setItem("todos", JSON.stringify(todos));

If you have bigger chunks of data to work with, you might want to store each of them with separate keys, but accessing all of them quickly can be done using this namespace approach:

// Storing
localStorage.setItem('todos:1', JSON.stringify(todo1));
localStorage.setItem('todos:2', JSON.stringify(todo2));

// Retrieving
const keys = Object.keys(localStorage).filter(key => key.startsWith('todos:'));
const todos = keys.map(key => JSON.parse(localStorage.getItem(key)));

Limitations of storing objects to localStorage

localStorage is one of the mechanisms of the Web Storage API. The API provides 5-10MB of storage per origin, and the exact storage may vary depending on the browser. Respecting this size limit, you should avoid storing more than 3-4MB of data per origin in Web Storage objects.

Keep in mind that Web Storage API operations are synchronous and block the main thread, therefore performing heavy operations using it may block other resources from loading in the browser.

Types of data that can be stored as a JSON string

Primitive data types like numbers, Booleans, and strings are JSON-safe, while values like functions, undefined, symbols, and Date objects are not JSON-safe. If no JSON-safe values are found during conversion, they are either excluded from an object or changed to null in an array.

Note: Some of these such values can be made JSON-safe, for example, we used the toISOstring method with the Date object in this example to make it JSON-safe before pushing it to Web Storage.

Conclusion

In this article, we learned a useful technique for storing multiple bits of information in a single localStorage key and using the JSON stringify and parse methods. We also covered some working demonstrations that apply this approach to different tasks, as well as storing and retrieving multiple JavaScript objects from localStorage.

In summary, we should be mindful of the data we store locally, and take advantage of the localStorage object to store JavaScript objects by first converting them to JSON strings with the JSON.stringify method and then turning them back to objects with the JSON.parse method.

LogRocket: Debug JavaScript errors more easily by understanding the context

Debugging code is always a tedious task. But the more you understand your errors, the easier it is to fix them.

LogRocket allows you to understand these errors in new and unique ways. Our frontend monitoring solution tracks user engagement with your JavaScript frontends to give you the ability to see exactly what the user did that led to an error.

LogRocket merekodkan log konsol, masa muat halaman, surih tindanan, permintaan/tindak balas rangkaian perlahan dengan badan pengepala, metadata penyemak imbas dan log tersuai. Memahami kesan kod JavaScript anda tidak akan menjadi lebih mudah!

Cuba secara percuma.

Atas ialah kandungan terperinci Menyimpan dan mendapatkan semula objek JavaScript dalam localStorage. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!