Detaillierte Einführung in Webstorage [lokale Datenverarbeitung von HTML5]

Der unten stehende Editor bietet Ihnen eine detaillierte Analyse der lokalen Datenverarbeitung im Webstorage [html5]. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Kommen Sie und schauen Sie sich den Editor an, ich wünsche Ihnen allen viel Spaß beim Spielen

1 Was ist webStorage?

webStorage ist eine Methode zur lokalisierten Speicherung in HTML5. Zuvor haben wir die Speichermethode von Cookie;

verwendet 2. Was ist der Unterschied zwischen ihnen?

Ⅰ Probleme mit Cookies:

ⅰ Cookie muss eine Anfrage an den Server senden und der Server gibt eine Cookie-ID zurück, die im Browser gespeichert ist Cache erfordert eine bestimmte Menge an Bandbreite. [Cookies werden zusammen mit den Header-Informationen jeder HTTP-Anfrage gesendet, was den Netzwerkverkehr unsichtbar erhöht];

ⅱ Die von Cookies gespeicherte Datenkapazität ist begrenzt und variiert je nach Browsertyp ca. 2K;

Ⅱ Und Webstorage muss nur Daten lokal speichern;

3 Wir können ein kleines Beispiel zur Veranschaulichung geben

Beispiel: Geben Sie den Benutzernamen und das Passwort ein, klicken Sie auf die Schaltfläche 1, um die Daten zu speichern, klicken Sie auf Schaltfläche 2 und aktualisieren Sie die Seite, um sie abzurufen.

Vorgang:

ⅰ.Erstellen Sie ein

Ereignis

XML/HTML Code复制内容到剪贴板
function MyClick1()   
{   
}

• 
  

ⅱ Erhalten Sie seinen Benutzernamen über eine ID

JavaScript CodeInhalt in die Zwischenablage kopieren

var username = $("#TxtUserName").val();

1. ⅲ Erhalten Sie das Passwort über eine ID

JavaScript-CodeInhalt in die Zwischenablage kopieren

var pwd = $("#TxtPwd").val();

1. ⅳ Wie geht das nach Erhalt? Wir speichern die Daten? Es gibt zwei Möglichkeiten:

① Der erste Weg:

SitzungStorege, verwendet im Firefox-Browser;

Lebenszyklus: Die auf diese Weise gespeicherten Daten sind nur auf Fensterebene gültig. Wenn dieselbe Fenster- (oder Tab-)Seite aktualisiert oder übersprungen wird, können die lokal gespeicherten Daten abgerufen werden Beim Öffnen eines Fensters oder einer Seite werden die Originaldaten ungültig [nur aktuelle Seite]

Nachteile: IE unterstützt dies nicht und kann keine dauerhafte Datenspeicherung erreichen.

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. sessionStorage.setItem(
   "k_username"
   , username);            sessionStorage.setItem(
   "k_pwd"
   , pwd);

Hinweis: sessionStorage.setItem wird in Schlüssel-Wert-Paaren gespeichert

> LocalStorage ist Teil der Web Storage Internet Storage-Spezifikation und wird jetzt in Firefox 3.5, Safari 4 und IE8 unterstützt.

Lebenszyklus: Wird auf dem lokalen Laufwerk C gespeichert und bleibt auch nach dem Schließen und Öffnen des Browsers dort.

Nachteile: Browser mit niedrigeren Versionen unterstützen es nicht.

JavaScript Code复制内容到剪贴板
localStorage.setItem("k_username", username);   
           localStorage.setItem("k_pwd",pwd);

• 
  

  ⅴ.Drucken

JavaScript Code复制内容到剪贴板
alert("保存成功！");

• 
  

  ⅵTaste 2 druckt alle oben genannten Daten

Die erste Möglichkeit zum Drucken:

JavaScript Code复制内容到剪贴板
function MyClick2() {   
                alert(sessionStorage.getItem("k_username"));   
                alert(sessionStorage.getItem("k_pwd"));   
            }

• 
  

  Zweite Möglichkeit zum Drucken

JavaScript Code复制内容到剪贴板
function MyClick2() {   
            alert(localStorage.getItem("k_username"));   
            alert(localStorage.getItem("k_pwd"))   
           }

• 
  

  Das Ergebnis zeigt:

 

ⅶ.Erweiterung: localStorage Methode „removeItem“

Lokale Daten verfolgen:

//如果我想删除它的用户名怎么做呢？通过它的key把它删除,这样获取时就为空

//localStorage.removeItem("k_username");

Ergebnisanzeige:

ⅷ.localStorage的clear方法

//如果我想把所有数据都清除？localStorage有个方法

localStorage.clear();

结果显示:

代码显示：

XML/HTML Code复制内容到剪贴板




    
    
    
    


    

        

            
用户名:
            

                
            
        
        

            
密码:
            

                
            
        
        

            

                
            
            

                
            
        
    

4.webStorage制作简易留言板[代码为了展示效果所以把js就直接在html里面写]

XML/HTML Code复制内容到剪贴板
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="js/jquery-1.4.1.min.js"></script>
    <script type="text/javascript">
    $(function () {   
        //4.页面刷新之后判断它是否为空？   
        if (localStorage.getItem("k_showCon") != null) {   
            //5.存在，就把获取到的内容存到里面去   
            "k_showCon", $("#showCon").html(localStorage.getItem("k_showCon"));   
        }   
    });   
        function preservationClick()   
        {   
            var sCon = $("#mCon").val();   
            //2.获取到内容之后加到显示p里去？怎么放呢？这里我们用append方法   
            $("#showCon").append("<p>" + sCon + "</p>");   
            //3.预期的是刷新之后留言还在   
            localStorage.setItem("k_showCon", $("#showCon").html());   
        }   
        function ClearClick()   
        {   
            //6.获取到显示p里面的内容清除   
            $("#showCon").html("");   
            localStorage.clear();   
        }   
    </script>
</head>
<body>
    <p>
        <table>
            <tr>
                <td colspan="2">
                    <textarea id="mCon" cols="25" rows="10"></textarea>
                </td>
            </tr>
            <tr>
                <td><input type="button" value="留言" onclick="preservationClick()" /></td>
                <td><input type="button" value="清除" onclick="ClearClick()" /></td>
            </tr>
        </table>
        <p id="showCon"></p>
    </p>
</body>
</html>

   效果显示:

               

                     

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in Webstorage [lokale Datenverarbeitung von HTML5]. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!