JavaScript menggunakan localStorage untuk menyimpan data

Artikel ini membawa anda pengetahuan yang berkaitan tentang javascript terutamanya cara JavaScript menggunakan localStorage untuk menyimpan data Kod sampel dalam artikel itu sangat terperinci dan saya harap ia berguna kepada semua orang.

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

Latar belakang

Pada masa lalu, js menggunakan Sesi dan Kuki untuk menyimpan maklumat, seolah-olah saya masih terperangkap pada masa itu, Apabila saya bertanya kepada rakan sekerja saya sama ada mereka mempunyai sebarang penyelesaian baharu, saya mengetahui bahawa sudah ada Storan tempatan HTML5 storan tempatan, yang boleh menyimpan data pada sisi penyemak imbas.

Saya masih ingat Kuki yang paling awal hanya boleh menyimpan perkara yang sangat kecil, kira-kira 4KB, dan keselamatannya sangat lemah Pada era IE6, nama domain hanya boleh memegang dua puluh Kuki, sekatannya agak besar Sudah tentu, IE juga mempunyai userData, yang tidak berguna. Flash juga disertakan dengan Storan, yang agak besar dan mempunyai lebih kurang 25 kali ganda ruang Cookie Pada masa itu, Flash juga ditinggalkan sekarang.

Dalam era H5, mereka bersatu, LocalStorage menguasai dunia. Pengesyoran rasmi ialah setiap tapak web ialah 5MB , yang sangat besar walaupun tetapan penyemak imbas berbeza-beza, ia secara amnya cukup untuk menyimpan beberapa JSON atau rentetan atau cache.

Storan tempatan HTML5 LocalStorage

• sessionStorage: Data yang disimpan digunakan untuk sesi penyemak imbas , Apabila sesi tamat (biasanya tetingkap ditutup), data akan dikosongkan; akan digunakan pada kali seterusnya anda melawat tapak web Pada masa ini, halaman web boleh terus membaca data yang disimpan sebelum ini. Kecuali untuk tempoh penyimpanan yang berbeza, sifat dan kaedah kedua-dua objek adalah sama.
  
• Ia sangat mirip dengan versi mekanisme kuki yang dipertingkatkan, walaupun ia boleh menggunakan ruang storan yang lebih besar. Walau bagaimanapun, seperti kuki, ia juga tertakluk pada sekatan domain yang sama. Data yang disimpan dalam halaman web hanya boleh dibaca oleh halaman web dalam domain yang sama. Dengan menyemak sama ada objek tetingkap mengandungi atribut sessionStorage dan localStorage, anda boleh menentukan sama ada penyemak imbas menyokong kedua-dua objek ini.
  

Kendalian storan

Data yang disimpan oleh sessionStorage dan localStorage semuanya diwakili oleh

function checkStorageSupport()
{
 // sessionStorage
 if (window.sessionStorage) {
  return true;
 } else {
  return false;
 }
 
 // localStorage
 if (window.localStorage) {
  return true;
 } else {
  return false;
 }
}

"Key-Value pair"

wujud dalam bentuk. Dengan kata lain, setiap item data mempunyai nama kunci dan nilai yang sepadan. Semua data disimpan dalam format teks.

Acara storan Apabila data yang disimpan berubah, peristiwa storan akan dicetuskan. Kita boleh menentukan fungsi panggil balik untuk acara ini.

//sessionStorage 操作
sessionStorage.setItem("key","value");     // setItem方法，存储变量名为key，值为value的变量
var valueSession = sessionStorage.getItem("key");  // getItem方法，读取存储变量名为key的值
sessionStorage.removeItem('key');      // removeItem方法，删除变量名为key的存储变量
sessionStorage.clear();        // clear方法，清除所有保存数据
//localStorage 操作
localStorage.setItem("key","value");     // 存储变量名为key，值为value的变量
localStorage.key = "value"        // 同setItem方法，存储数据
var valueLocal = localStorage.getItem("key");   // 读取存储变量名为key的值
var valueLocal = localStorage.key;      // 同getItem，读取数据
localStorage.removeItem('key');      // removeItem方法，删除变量名为key的存储变量
localStorage.clear();         // clear方法，清除所有保存的数据

// 利用length属性和key方法，遍历所有的数据
for(var i = 0; i < localStorage.length; i++)
{
 console.log(localStorage.key(i));
}

// 存储 localStorage 数据为 Json 格式
value = JSON.stringify(jsonValue);      // 将 JSON 对象 jsonValue 转化成字符串
localStorage.setItem("key", value);     // 用 localStorage 保存转化好的的字符串

// 读取 localStorage 中 Json 格式数据
var value = localStorage.getItem("key");    // 取回 value 变量
jsonValue = JSON.parse(value);      // 把字符串转换成 JSON 对象

Fungsi panggil balik menerima objek acara sebagai parameter. Atribut kunci objek acara ini menyimpan nama kunci yang diubah.

Selain atribut utama, objek acara mempunyai tiga atribut:

window.addEventListener("storage",onStorageChange);

oldValue: nilai sebelum kemas kini. Jika kunci baru ditambahkan, atribut ini adalah batal.

Nilai baharu: nilai yang dikemas kini. Jika kunci telah dipadamkan, sifat ini adalah batal.

function onStorageChange(e)
{
  console.log(e.key); 
}

url: URL halaman web yang pada asalnya mencetuskan acara storan.

• Adalah penting untuk ambil perhatian bahawa peristiwa ini tidak dicetuskan pada halaman semasa yang menyebabkan data berubah. Jika penyemak imbas membuka berbilang halaman di bawah nama domain pada masa yang sama, apabila salah satu halaman menukar data sessionStorage atau localStorage, peristiwa storan semua halaman lain akan dicetuskan dan peristiwa storan tidak akan dicetuskan oleh yang asal muka surat. Melalui mekanisme ini, komunikasi antara berbilang tingkap boleh dicapai. Di antara semua pelayar, kecuali IE, ia akan mencetuskan acara storan pada semua halaman.
• 
  Pengetahuan lanjutan

1 localStorage dan sessionStorage ialah dua kaedah storan yang disediakan oleh storan web HTML5 dan kebanyakan pelayar Semua pelayan disokong

2 Perbezaan antara localStorage dan sessionStorage: (1), localStorage dan sessionStorage ialah kedua-dua objek yang digunakan untuk menyimpan maklumat sementara pada klien.

(2) Mereka hanya boleh menyimpan objek jenis rentetan (walaupun jenis objek asli lain boleh disimpan dalam spesifikasi, tetapi setakat ini tiada penyemak imbas yang melaksanakannya).

(3). Kitaran hayat localStorage adalah kekal, yang bermaksud bahawa melainkan pengguna mengosongkan maklumat localStorage pada UI yang disediakan oleh penyemak imbas, maklumat ini akan wujud selama-lamanya. (dirakam dalam ingatan)

Kitaran hayat sessionStorage ialah tetingkap atau tab semasa Setelah tetingkap atau tab ditutup, semua data yang disimpan melalui sessionStorage akan dikosongkan (storan sesi)

(4), Penyemak imbas yang berbeza tidak boleh berkongsi maklumat. dalam localStorage atau sessionStorage. Halaman yang berbeza dalam penyemak imbas yang sama boleh berkongsi localStorage yang sama (halaman tergolong dalam nama domain dan port yang sama), tetapi maklumat sessionStorage tidak boleh dikongsi antara halaman atau tab yang berbeza.

Perlu diingatkan di sini bahawa halaman dan tab hanya merujuk kepada tetingkap peringkat teratas Jika tab mengandungi berbilang teg iframe dan ia tergolong dalam halaman sumber yang sama, maka sessionStorage boleh dikongsi antara mereka. (Prinsip asal yang sama)

3. Saiz data yang boleh disimpan localStorage dan sessionStorage ialah 5MB

[Cadangan berkaitan: tutorial video javascript, web bahagian hadapan】

Atas ialah kandungan terperinci JavaScript menggunakan localStorage untuk menyimpan data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!