HTML5 WebStorage (HTML5 teknologi storan tempatan)_CSS/HTML

WebStorage ist eine der lokalen Speicherlösungen in HTML5. IE-Benutzerdaten, Flash-Cookies, Google Gears und andere unzuverlässige Lösungen wurden entfernt. Es werden ausschließlich Cookies verwendet. Einige Studenten fragen sich vielleicht, warum wir das Konzept von WebStorage einführen müssen, da wir über einen lokalen Cookie-Speicher verfügen.

Was ist los mit Cookie?

Die Mängel von Keksen liegen auf der Hand

1. Datengröße: Als Speichercontainer ist die Größe von Cookies auf etwa 4 KB begrenzt, was insbesondere für aktuelle komplexe Geschäftslogikanforderungen sehr ärgerlich ist. Zusätzlich zur Speicherung einiger Konfigurationsfelder werden auch einfache Daten gespeichert Einwertige Informationen. Die meisten Entwickler wissen wirklich nicht, was sie erwartet.
2. Sicherheitsprobleme: Da das Cookie in der HTTP-Anfrage im Klartext übergeben wird (HTTPS nicht), sind die Sicherheitsprobleme immer noch riesig.
3. Netzwerkbelastung: Wir wissen, dass Cookies an jede HTTP-Anfrage angehängt und in den Headern von HttpRequest und HttpResponse übertragen werden, sodass einige unnötige Verkehrsverluste entstehen.

WebStorage

WebStorage ist eine der neuen lokalen Speicherlösungen für HTML, aber es handelt sich nicht um einen Standard, der als Ersatz für Cookies entwickelt wurde. Cookies sind als Teil des HTTP-Protokolls zur Abwicklung der Client- und Serverkommunikation unverzichtbar Zustandserhaltung. Der Zweck von WebStorage besteht darin, das Problem der lokalen Speicherung zu lösen, die nicht mit Cookies erfolgen sollte, sondern Cookies verwenden muss.
WebStorage bietet zwei Arten von APIs: localStorage und sessionStorage. Der Unterschied zwischen den beiden lässt sich grob anhand der Namen erkennen, die Daten dauerhaft lokal speichern, sofern sie nicht explizit gelöscht oder gelöscht werden Die Sitzung ist für einen bestimmten Zeitraum gültig und wird automatisch gelöscht, wenn Sie den Browser schließen. Beide Objekte verfügen über eine gemeinsame API.

Code kopieren Der Code lautet wie folgt:

Schnittstellenspeicher {
schreibgeschütztes Attribut ohne Vorzeichen lange Länge;
DOMString? key (unsigned long index); );
void clear();
};



1. Länge: Das einzige schreibgeschützte Attribut, das verwendet wird, um die Anzahl der Schlüssel-Wert-Paare im Speicher zu ermitteln.

2. Schlüssel: Holen Sie sich den Schlüsselnamen des Speichers basierend auf dem Index 3. Holen Sie sich den entsprechenden Wert im Speicher basierend auf dem Schlüssel

4 den Speicher
5. RemoveItem: Löschen Sie das Schlüssel-Wert-Paar entsprechend dem Schlüsselnamen
6. Clear: Löschen Sie das Speicherobjekt


So verwenden Sie WebStorage

In einem Browser, der WebStorage implementiert, verfügt die Seite über zwei globale Objekte, localStorage und sessionStorage

Nehmen Sie localStorage als Beispiel Schauen Sie sich einen einfachen Operationscode an

Kopieren Sie den Code Der Code lautet wie folgt:

var ls=localStorage;
            console.log(ls.length);//0
            ls.setItem('name','Byron');
            ls.setItem(' age','24');
            console.log(ls.length);//2

            //遍历localStorage
            for(var i=0;i                /*
                  나이 : 24
                 이름 : 바이런
         */                var key=ls.key(i);
                console.log(key+' : '+ls .getItem(key));
            }

            ls.removeItem('age');

          
            for(var i=0;i               /*
                  이름 : 바이런
               */
              var key=ls.key(i);                console.log(key+' : '+ls.getItem(key));
            }
            ls.clear();//0
            console.log(ls.length);

사례

동일한 HTML5가 정의하는 저장소 작업, WebStorage에서 WebStorage发生变化적 时候触发, 可以용 此监视가 다른 저장소에 대한 작업
🎜>

复代码 代码如下:

interface StorageEvent : Event {
  읽기 전용 속성 DOMString key;
  읽기 전용 속성 DOMString? oldValue;
  읽기 전용 속성 DOMString? newValue;
  읽기 전용 속성 DOMString url;
  읽기 전용 속성 저장소? StorageArea;
};

1、key:键值对的键
2、oldValue：修改之前的value
3、newValue：修改之后的value
4、url：触发改动的页faceurl
5、StorageArea：发生改变的Storage
재index.php중정义

复代码 代码如下:

테스트

复主代码 代码如下:

window.addEventListener('storage',function(e) {
               console.log(e.key+'는 '+e.url에 의해 '+e.oldValue+'에서 '+e.newValue+'로 변경됨);
               console.log(e.storageArea ==localStorage) ;
            },false);

            localStorage.setItem('userName','Byron');

test.php

复aze代码 代码如下:

localStorage.setItem('userName ','캐스퍼');

Apabila anda mengklik pautan pada halaman index.php untuk mengakses test.php, anda boleh melihat log keluaran konsol index.php:
Nama pengguna ditukar bentuk Byron kepada Casper oleh http://localhost/test .php
benar

Mengapa ia lebih baik daripada kuki

1. Dari segi kapasiti, WebStorage secara amnya menyediakan 5M ruang storan dalam penyemak imbas, yang tidak mencukupi untuk menyimpan video dan gambar, tetapi ia mencukupi untuk kebanyakan operasi
2 Dari segi keselamatan, WebStorage tidak memainkan peranan Pengepala HTTP dihantar oleh penyemak imbas, jadi ia agak selamat
3. Dari segi trafik, kerana WebStorage tidak dihantar ke pelayan, trafik yang tidak perlu boleh disimpan, yang masih sangat mudah untuk frekuensi tinggi lawatan atau halaman web yang menyasarkan peranti mudah alih.
Ini tidak bermakna WebStorage boleh menggantikan kuki, tetapi dengan WebStorage, kuki hanya boleh melakukan perkara yang sepatutnya dilakukan - berfungsi sebagai saluran untuk interaksi antara pelanggan dan pelayan, dan mengekalkan keadaan klien. Jadi WebStorage lebih unggul daripada kuki hanya sebagai penyelesaian storan tempatan.

Perkara yang perlu diberi perhatian

1 Keserasian penyemak imbas, ini adalah hampir yang paling mudah untuk dilaksanakan antara semua ciri HTML5 baharu, kerana pelayar IE8+ menyokongnya, dan dalam IE7 , IE6 boleh dilaksanakan. menggunakan Data Pengguna IE.

2. Memandangkan localStorage dan sessionStorage adalah kedua-dua objek, anda juga boleh mendapatkan dan mengubah suai pasangan nilai kunci melalui ".key" atau "[key]", tetapi ini tidak disyorkan.

 2. 由于localStorage和sessionStorage都是对象，所以我饿每年也可以通过”.key”或”[key]”的方式获取、修改键值对，但不推荐这么做 。

复制代码 代码如下:

localStorage.userName='Frank';
console.log(localStorage['userName']);

3.虽然localStorage存储在本地，但不同的浏览器存储存储数据是独立的，所以在Chrome上存储的localStorage在FireFox上是获取不到的。
4. localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理，低版本IE可以使用json2.js
5.除了控制台，Chrome还为本地存储提供了非常直观的显示方式，调试的时候很方便

Salin kod Kod adalah seperti berikut:

localStorage.userName='Frank'; console.log(localStorage['userName']);

3 Walaupun localStorage disimpan secara setempat, penyemak imbas berbeza menyimpan data secara bebas, jadi localStorage yang disimpan pada Chrome adalah Ia tidak tersedia. pada FireFox. 4. localStorage dan sessionStorage hanya boleh menyimpan jenis rentetan Untuk objek yang kompleks, anda boleh menggunakan stringify dan menghuraikan objek JSON yang disediakan oleh ECMAScript untuk mengendalikannya IE versi yang lebih rendah5 kepada konsol, Chrome juga menyediakan kaedah paparan yang sangat intuitif untuk storan setempat, yang sangat mudah apabila menyahpepijat