Heim > Artikel > Web-Frontend > Beispielcode für die HTML5-Datenspeicherung

Beispielcode für die HTML5-Datenspeicherung

零下一度Original: 2017-04-21 15:55:593097Durchsuche

html5Datenspeicherung

Bisher gibt es viele Möglichkeiten, clientseitige Speicherung zu implementieren. Die einfachste und kompatibelste Lösung sind Cookies, aber als echte clientseitige Speicherung bestehen immer noch einige Mängel .

大小	cookie的大小被限制在4KB。
带宽	cookie是随http事务一起发送的，因此会浪费一部分发送cookies时使用的带宽。
复杂	cookies操作起来比较麻烦：所有信息要被拼到一个长字符串里面。
联系	对cookiess来说，在相同的站点与多事务处理保持联系不是很容易。

Größe

Die Cookie-Größe ist auf 4 KB begrenzt.

Bandbreite

Cookies sind zufällig HTTP-Transaktionen werden zusammen gesendet, sodass ein Teil der beim Senden von Cookies verwendeten Bandbreite verschwendet wird.

Komplex

Cookies funktionieren problematischer: Alle Informationen müssen in eine lange Zeichenfolge geschrieben werden.

Kontaktieren Sie

für Cookies Allerdings ist es nicht ganz einfach, über mehrere Transaktionen auf derselben Website in Kontakt zu bleiben.

In diesem Fall wird die Funktion „Web Storage“

, eine Funktion zum lokalen Speichern von Daten auf dem Client, in HTML5 neu bereitgestellt.

Es enthält zwei Speichertypen

SessionStorage und localStorage unterstützen beide das Speichern von 5 MB Daten in derselben Domäne

Der Unterschied besteht darin, dass

SessionStorage-Daten Vorübergehend gespeichert (wenn der Benutzer den Browser schließt --- die Daten sind nicht vorhanden)

localStorage wird dauerhaft gespeichert wenn der Benutzer den Browser schließt --- die Daten sind weiterhin vorhanden (Es sei denn, der Benutzer löscht manuell)

※Wir können es unten anhand von Beispielen beweisen※

Erstellen Sie zunächst zwei Seiten

Der Seitencode lautet wie folgt:

Index.html->
 
<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8" />
       <title></title>
    </head>
    <body>
       <a href="test.html" target="_blank">打开测试页面看一下</a>
       <script type="text/javascript">
           window.onload=function(){
              sessionStorage.setItem("date","今天是2017年2月3号，本少心情不错！")
              localStorage.setItem("localDate","我想讲今天这个种心情永久的保存下来，留下最美好的见证！")
           }
          
       </script>
    </body>
</html>
 
Test.html->
 
<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
    </head>
    <body>
       <script type="text/javascript">
           window.onload=function(){
              alert("临时会话："+sessionStorage.getItem("date"));
              alert("永久会话："+localStorage.getItem("localDate"));
           }
       </script>
    </body>
</html>

Öffnen Sie zuerst die Homepage und werfen Sie einen Blick darauf ->Klicken Sie auf den Link

Sie können diese Effekte sehen

Okay Jetzt schließen wir. Verwenden Sie den Browser, um den Effekt zu sehen

Kopieren Sie zuerst den Link

Wir werden diese Textseite jetzt nur öffnen

Jetzt können Sie sehen, dass diese temporäre Sitzung verschwindet, wenn wir den Browser schließen

Aber sie wird über den lokalen Speicher gespeichert Die Daten sind noch vorhanden

Die Daten hier nutzen also je nach Nutzung unterschiedlichen Speicher

Im Allgemeinen große Bilddaten wie z. B. Es wird auf die Verwendung von bese64 festgelegt Zum Speichern in der lokalen Sitzung ist jedoch zu beachten, dass der Speicher auch hier auf 5 MB begrenzt ist und das Speichern in Form von Schlüssel-Wert-Paaren der Programmerweiterung nicht förderlich ist. Daher wird hier auch ein anderer Speichermechanismus für HTML bereitgestellt . "web sql".

Es gibt eine in HTML5 integrierte Datenbank, auf die über die SQL-Sprache zugegriffen werden kann. Schauen Sie sich einfach den Namen an und Sie werden wissen, dass es sich um die lokale Datenbankspeicherfunktion handelt Das kann Daten abfragen und hinzufügen. In HTML5 wird der Inhalt, der lokal auf dem Client gespeichert werden kann, erheblich erweitert.

Derzeit werden häufig SQL-Daten vom Dateityp „SQLLLite“ verwendet, die nicht auf dem Server gespeichert werden müssen, sodass diese Art von Datenbank auch in HTML5 als lokale Datenbank verwendet wird.

Lassen Sie uns zur Veranschaulichung nur ein Beispiel verwenden --- (Weil diejenigen, die Datenbanken studiert haben, im Allgemeinen verstehen, dass es sich um lokale Daten handelt, die im Grunde mit der Datenbank identisch sind, die wir normalerweise installieren.)

Erstellen Sie eine neue

WebSQL.html

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
    </head>
    <body>
       <script type="text/javascript">
           window.onload=function(){
              //打开和创建数据库
              var db;
              //首先判断浏览器是否支持本地数据库
              if(window.openDatabase){
                  //初次打开一个数据库，就会自动创建数据库。任何时间，在该“域”上只能拥有指定数据库的一个版本，因此如果创建了
                  //版本1.0,那么应用程序在没有特定的改变数据库的版本时，将无法打开1.1。
                  //打开和创建数据库，第一参数数据库名，第二个参数版本号，第三个参数为数据库的描述，第四个参数为数据库的大小
                  //该方法返回创建后的数据库访问对象，如果该数据库不存在，则创建该数据库。
                  db=openDatabase("myWBSQL",&#39;1.0&#39;,&#39;这个是描述可以写可以不写&#39;,2*1024*1024);
                  //使用事务来执行处理（一般的学过数据库知道这种处理方式的优点）
                  db.transaction(function(tx){
                     //执行SQL语句---这里创建一个数据库
                     tx.executeSql(&#39;create table if not exists st(id,age,name)&#39;);
                     //添加一条SQL语句
                     //第一个参数为需要执行的SQL语句,第二个参数为SQL语句中用到参数数组
                     //后面两个参数为成功和失败的回调函数
                     tx.executeSql("insert into st(id,age,name)values(?,?,?)",["1","天下第几","毛馨婕"],function(tx,results){
                         //成功之后的回调函数
                         alert("插入语句成功");
                         console.info(results);
                     },function(tx,errmsg){
                         alert("插入语句失败！");
                         console.info(errmsg);
                     })
                  });
              }else{
                  alert("您的浏览器不支持本地数据！")
              }
           }
       </script>
    </body>
</html>

Öffnen wir den Sogou-Browser, um es auszuprobieren ->Hier, um die Konsole einzuchecken

Hier können wir deutlich erkennen, dass die in die lokale Datenbank eingefügte Anweisung genau mit dem übereinstimmt, was wir geschrieben haben

Dann erstellen wir eine neue Seite, um die Daten in den lokalen Daten anzuzeigen, nachdem wir den Browser geschlossen haben

selectSQL.html 
<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
    </head>
    <body>
       <script type="text/javascript">window.onload = function()
 {
    var db;
    if(window.openDatabase)
 {
       db = openDatabase("myWBSQL", &#39;1.0&#39;, &#39;这个是描述可以写可以不写&#39;, 2 * 1024* 1024);
        db.transaction(function(tx)
 {
           tx.executeSql("select * from st where name=?", ["毛馨婕"],function(tx, results)
 {
              console.info(results);
              alert(results[&#39;rows&#39;][0][&#39;name&#39;]+"---"+results[&#39;rows&#39;][0][&#39;age&#39;]);
           }, function(tx, errmsg)
 {
              console.info(errmsg);
           })
       });
    } else {
       alert("您的浏览器不支持本地数据！")
    }
}</script>
    </body>
</html>

Seite öffnen

Sie können in der Konsole sehen

Natürlich ist das sehr einfach, aber durch langsames Ansammeln können wir Schritt für Schritt wachsen. Also lasst uns gemeinsam mit allen lernen

Das obige ist der detaillierte Inhalt vonBeispielcode für die HTML5-Datenspeicherung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was sind die Anforderungen für das H5-Responsive-Website-Design?Nächster Artikel：Was sind die Anforderungen für das H5-Responsive-Website-Design?

In Verbindung stehende Artikel

Mehr sehen