Zusammenfassung des lokalen Javascript-Speichers

1. Ein einfacher Vergleich verschiedener Speicherlösungen

Cookies: werden von allen Browsern unterstützt, mit einer Kapazität von 4 KB

Benutzerdaten: werden nur von IE unterstützt, mit einer Kapazität von 64 KB

Flash: 100 KB, nicht HTML-nativ, erfordert Plug-in-Unterstützung

Google Gears SQLite: erfordert Plug-in-Unterstützung, unbegrenzte Kapazität

LocalStorage: HTML5, Kapazität beträgt 5 MB

SesstionStorage: HTML5, Kapazität beträgt 5M

GlobalStorage: einzigartig für Firefox, diese Methode wird ab Firefox13 nicht mehr unterstützt

UserData wird nur vom IE unterstützt, Google Gears SQLite erfordert ein Plug-in, und Flash ist mit dem Aufkommen von HTML5 allmählich aus der Geschichte ausgetreten, sodass unsere Protagonisten heute nur noch drei davon sind: Cookie, LocalStorge, SesstionStorge;

2. Cookie

Als Frontend wird die Häufigkeit, mit der Sie sich mit Cookies auseinandersetzen müssen, definitiv nicht geringer sein. Es handelt sich um eine relativ alte Technologie. 1993 erfand Netscape-Mitarbeiter Lou Montulli das Cookie, das heute weit verbreitet ist, um es voranzutreiben Verbesserung der Zugriffsgeschwindigkeit beim Besuch einer Website durch Benutzer und zur weiteren Personalisierung des Netzwerks.

2.1 Eigenschaften von Cookies

Werfen wir zunächst einen Blick auf die Eigenschaften von Cookies:

1) Die Größe von Cookies ist auf 4 KB begrenzt. Große Cookies wie Dateien oder E-Mails können nicht akzeptiert werden.

2) Solange eine Anfrage mit Cookies vorliegt, werden Cookies zwischen dem Server und dem Browser hin und her gesendet (dies erklärt, warum lokale Dateien Cookies nicht testen können). Darüber hinaus werden die Cookie-Daten in der HTTP-Anfrage immer vom gleichen Ursprung übertragen (auch wenn sie nicht benötigt werden), was auch ein wichtiger Grund dafür ist, dass das Cookie nicht zu groß sein darf. Die orthodoxe Cookie-Verteilung wird durch die Erweiterung des HTTP-Protokolls erreicht. Der Server fügt dem HTTP-Antwortheader eine spezielle Befehlszeile hinzu, um den Browser aufzufordern, das entsprechende Cookie gemäß den Anweisungen zu generieren.

3) Jedes Mal, wenn ein Benutzer Serverdaten anfordert, werden zusammen mit diesen Anfragen Cookies an den Server gesendet. Server-Skriptsprachen wie PHP können die von Cookies gesendeten Daten verarbeiten sehr praktisch. Natürlich kann das Front-End auch Cookies generieren, um Cookies zu verwenden. Der Browser stellt nur ein Objekt wie document.cookie bereit, und das Zuweisen und Abrufen von Cookies ist schwieriger. In PHP können wir Cookies über setcookie() setzen und Cookies über das superglobale Array $_COOKIE erhalten.

Der Inhalt von Cookies umfasst hauptsächlich: Name, Wert, Ablaufzeit, Pfad und Domäne. Der Pfad und die Domäne bilden zusammen den Geltungsbereich des Cookies. Wenn die Ablaufzeit nicht festgelegt ist, bedeutet dies, dass die Lebensdauer dieses Cookies während der Browsersitzung beträgt. Wenn das Browserfenster geschlossen wird, verschwindet das Cookie. Diese Art von Cookie, das für die Dauer der Browsersitzung bestehen bleibt, wird als Sitzungscookie bezeichnet. Sitzungscookies werden im Allgemeinen nicht auf der Festplatte, sondern im Speicher gespeichert. Dieses Verhalten ist in der Spezifikation natürlich nicht festgelegt. Wenn eine Ablaufzeit eingestellt ist, speichert der Browser die Cookies auf der Festplatte. Wenn Sie den Browser schließen und erneut öffnen, bleiben diese Cookies weiterhin gültig, bis die eingestellte Ablaufzeit überschritten ist. Auf der Festplatte gespeicherte Cookies können von verschiedenen Browserprozessen gemeinsam genutzt werden, beispielsweise von zwei IE-Fenstern. Verschiedene Browser haben unterschiedliche Möglichkeiten, im Speicher gespeicherte Cookies zu verarbeiten.

2.2 Sitzung

Wenn es um Cookie geht, kommen wir nicht umhin, über Sitzung zu sprechen.

Sitzungsmechanismus. Der Sitzungsmechanismus ist ein serverseitiger Mechanismus. Der Server verwendet eine Struktur ähnlich einer Hash-Tabelle (oder verwendet möglicherweise eine Hash-Tabelle), um Informationen zu speichern. Wenn das Programm eine Sitzung für die Anfrage eines Clients erstellen muss, prüft der Server zunächst, ob die Anfrage des Clients bereits eine Sitzungskennung (Sitzungs-ID) enthält. Wenn dies der Fall ist, bedeutet dies, dass für diesen Client bereits eine Sitzung erstellt wurde. Der Server ruft die Sitzung entsprechend der Sitzungs-ID ab und verwendet sie (wenn sie nicht abgerufen werden kann, wird eine neue erstellt. Wenn die Client-Anfrage die Sitzungs-ID nicht enthält, wird eine Sitzung für den Client erstellt und a). Die dieser Sitzung zugeordnete Sitzungs-ID sollte eine Zeichenfolge sein, die sich weder wiederholt noch leicht zu imitieren ist. Diese Sitzungs-ID wird in dieser Antwort zur Speicherung zurückgegeben. Die Methode zum Speichern dieser Sitzungs-ID kann Cookies verwenden, sodass der Browser diese Identifikation während des Interaktionsprozesses automatisch gemäß den Regeln an den Server senden kann. Im Allgemeinen ähnelt der Name dieses Cookies SEEESIONID. Aber Cookies können künstlich deaktiviert werden, und es müssen andere Mechanismen vorhanden sein, um die Sitzungs-ID trotzdem an den Server zurückzugeben, wenn Cookies deaktiviert sind. Eine häufig verwendete Technik ist das sogenannte URL-Rewriting, bei dem die Sitzungs-ID direkt an das Ende des URL-Pfads angehängt wird. Zum Beispiel: http://damonare.cn?sessionid=123456 Es gibt auch eine Technologie namens Form Hidden Fields. Das heißt, der Server ändert das Formular automatisch und fügt ein ausgeblendetes Feld hinzu, sodass die Sitzungs-ID beim Absenden des Formulars an den Server zurückgegeben werden kann. Zum Beispiel:

Tatsächlich kann diese Technik einfach durch Anwenden der URL-Umschreibung auf die Aktion ersetzt werden.

2.3 Einfacher Vergleich von Cookie und Sitzung

Der Unterschied zwischen Cookie und Sitzung:

1) Cookie-Daten werden im Browser des Clients gespeichert und Sitzungsdaten werden dort abgelegt Server.

2) Cookies sind nicht sehr sicher. Aus Sicherheitsgründen sollten lokal gespeicherte Cookies analysiert werden.

3) Die Sitzung wird für einen bestimmten Zeitraum auf dem Server gespeichert. Wenn die Besuche zunehmen, wird die Leistung Ihres Servers stärker beansprucht. Um die Serverleistung zu verringern, sollten Cookies verwendet werden.

4) Die von einem einzelnen Cookie gespeicherten Daten dürfen 4 KB nicht überschreiten. Viele Browser beschränken die Speicherung einer Website auf bis zu 20 Cookies.

5) Daher wird empfohlen:

Wichtige Informationen wie Anmeldeinformationen als SESSION speichern

Wenn andere Informationen gespeichert werden müssen, können diese in Cookies abgelegt werden

2.4 Das document.cookie-Attribut

expires-Attribut

gibt die Lebensdauer des Coolies an. Standardmäßig sind Coolies temporär und die von ihnen gespeicherten Werte existieren nur während der Browsersitzung und wenn der Benutzer das Programm verlässt, gehen diese Werte auch nach dem Öffnen des Browsers verloren. Wenn Sie möchten, dass das Cookie für einen bestimmten Zeitraum bestehen bleibt, müssen Sie das Expires-Attribut auf ein Ablaufdatum in der Zukunft setzen. Dies wurde nun durch das Attribut „max-age“ ersetzt, das die Lebensdauer des Cookies in Sekunden festlegt.

Pfadattribut

Es gibt die mit dem Cookie verknüpfte Webseite an. Standardmäßig ist ein Cookie mit der Webseite verknüpft, die es erstellt, mit Webseiten im selben Verzeichnis wie diese Webseite und mit Webseiten in Unterverzeichnissen des Verzeichnisses, in dem sich diese Webseite befindet.

Domänenattribut

Domänenattribut ermöglicht mehreren Webservern die gemeinsame Nutzung von Cookies. Der Standardwert des Domänenattributs ist der Hostname des Servers, auf dem sich die Webseite befindet, die das Cookie erstellt hat. Die Domäne eines Cookies kann nicht auf eine andere Domäne als die Domäne festgelegt werden, in der sich der Server befindet. Lassen Sie beispielsweise den Server unter order.damonare.cn in der Lage sein, den von Catalog.damonare.cn festgelegten Cookie-Wert zu lesen. Wenn das von der Seite „catalog.damonare.cn“ erstellte Cookie sein Pfadattribut auf „/“ und das Domänenattribut auf „.damonare.cn“ setzt, dann alle Webseiten, die sich unter „catalog.damonare.cn“ befinden, und alle Seiten, die sich unter „Orlders“ befinden. Damonare.cn-Webseiten sowie Webseiten auf anderen Servern in der Domäne damonare.cn können auf dieses Cookie zugreifen.

sicheres Attribut

Es ist ein boolescher Wert, der angibt, wie Cookies im Netzwerk übertragen werden. Er ist standardmäßig unsicher und wird über eine normale http-Verbindung übertragen

2.5 Cookie Üben

Hier verwenden wir Javascript, um ein Cookie zu schreiben, und leihen uns dabei die Demo von w3cschool aus:

function getCookie(c_name){
    if (document.cookie.length>0){
        c_start=document.cookie.indexOf(c_name + "=")
        if (c_start!=-1){
            c_start=c_start + c_name.length+1
            c_end=document.cookie.indexOf(";",c_start)
            if (c_end==-1) c_end=document.cookie.length
            return unescape(document.cookie.substring(c_start,c_end))
        }
    }
    return "";
}

function setCookie(c_name,value,expiredays){
    var exdate=new Date()
    exdate.setDate(exdate.getDate()+expiredays)
    document.cookie=c_name+ "=" +escape(value)+
            ((expiredays==null) ? "" : "; expires="+exdate.toUTCString())
}
function checkCookie(){
    username=getCookie('username')
    if(username!=null && username!=""){alert('Welcome again '+username+'!')}
    else{
        username=prompt('Please enter your name:',"")
        if (username!=null && username!=""){
            setCookie('username',username,355)
        }
    }
}

Beachten Sie, dass hier die Lebensdauer des Cookies definiert ist, die 355 Tage beträgt

3. localStorage

Dies ist eine dauerhafte Speichermethode, was bedeutet, dass die Daten niemals ablaufen, wenn sie nicht manuell gelöscht werden.

Es verwendet auch die Schlüsselwertmethode zum Speichern von Daten. Die zugrunde liegende Datenschnittstelle ist SQLite, und die Daten werden entsprechend dem Domänennamen in der entsprechenden Datenbankdatei gespeichert. Es können größere Datenmengen gespeichert werden (10 MB bei IE8, 5 MB bei Chrome), und die gespeicherten Daten werden nicht an den Server gesendet, um Bandbreitenverschwendung zu vermeiden.

3.1 Attributmethoden von localStorage

Die folgende Tabelle enthält einige Attribute und Methoden von localStorge

3.2 Nachteile von localStorage

① Die Größe von localStorage ist auf etwa 5 Millionen Zeichen begrenzt, was bei verschiedenen Browsern inkonsistent ist

② localStorage ist im Datenschutzmodus nicht lesbar

③ Das ​​Wesen von localStorage besteht im Lesen und Schreiben Wenn viele Daten vorhanden sind, wird es mehr Karten geben (Firefox importiert die Daten auf einmal in den Speicher, was beängstigend ist, wenn man darüber nachdenkt)

④ localStorage kann nicht von Crawlern gecrawlt werden. Verwenden Sie es nicht, um die URL-Parameterübergabe vollständig zu ersetzen

4. sessionStorage

Ähnlich wie bei der serverseitigen Sitzung handelt es sich um einen Cache auf Sitzungsebene Der Browser wird geschlossen. Das Besondere ist jedoch, dass der Gültigkeitsbereich auf Fensterebene liegt, was bedeutet, dass sessionStorage-Daten nicht zwischen verschiedenen Fenstern gemeinsam genutzt werden können. Verwendung (genau die gleiche wie localStorage):

5. sessionStorage和localStorage的区别

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。当用户关闭浏览器窗口后，数据立马会被删除。

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。第二天、第二周或下一年之后，数据依然可用。

5.1 测试

sessionStorage:

if (sessionStorage.pagecount){
    sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}else{
      sessionStorage.pagecount=1;
}
console.log("Visits "+ sessionStorage.pagecount + " time(s).");

测试过程：我们在控制台输入上述代码查看打印结果

控制台首次输入代码：

关闭窗口，控制台再次输入代码：

所谓的关闭窗口即销毁，就是这样，关闭窗口重新打开输入代码输出结果还是上面图片的样子，也就是说关闭窗口后sessionStorage.pagecount即被销毁，除非重心创建。或者从历史记录进入才会相关数据才会存在。好的，我们再来看下localStorge表现：

if (localStorage.pagecount){
    localStorage.pagecount=Number(localStorage.pagecount) +1;
}else{
    localStorage.pagecount=1;
 }
console.log("Visits "+ localStorage.pagecount + " time(s).");

控制台首次输入代码：

关闭窗口，控制台再次输入代码：

6. web Storage和cookie的区别

Web Storage(localStorage和sessionStorage)的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生