recherche

Maison >interface Web >Tutoriel H5 >Parcours d'apprentissage HTML5 - Présentation du stockage Web HTML5 (16)

Parcours d'apprentissage HTML5 - Présentation du stockage Web HTML5 (16)

黄舟
黄舟original
2017-02-17 14:49:581364parcourir

En plus du canevas, une autre fonction très importante du HTML5 est le stockage Web de stockage local côté client. Auparavant, les noms d'utilisateur et d'autres informations pouvaient être stockés dans des cookies côté utilisateur. que le stockage des cookies présente les problèmes suivants :

Taille : la taille des cookies est limitée à environ 4 Ko

Bande passante : les cookies sont envoyés avec l'activité HTTP, donc une partie de la bande passante est gaspillée

Complexité : Obligatoire Il est difficile de faire fonctionner correctement les Cookies

En réponse aux problèmes ci-dessus, HTML5 propose une méthode pour sauvegarder les données localement : le stockage web

Il dispose de deux méthodes de traitement :

stockage de session : enregistrez les données dans l'objet de session. La session est le temps qui s'écoule entre le moment où un utilisateur ouvre le site Web et le moment où il ferme le site Web, c'est-à-dire le temps pendant lequel l'utilisateur navigue sur le site Web. L'objet de session peut enregistrer toutes les données pendant cette période.

Stockage local : enregistrez les données dans le matériel du client (disque dur) même si le navigateur de l'utilisateur est fermé. La prochaine fois que vous l'ouvrirez, le

instance de stockage de session

code index.html 

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>H5表格提交</title>
    <script src="appWeb.js"></script></head><body>
    <p id="msg"></p>
    <input type="text" id="input">
    <input type="button" value="保存数据" onclick="saveStorage(&#39;input&#39;)">
    <input type="button" value="读取数据" onclick="loadStorage(&#39;msg&#39;)"></body></html>

code appWeb 

/**
 * Created by joy liu on 2015/9/22.
 */function saveStorage(id){    var target = document.getElementById(id);    var string = target.value;
    sessionStorage.setItem("message",string);
}
function loadStorage(id){    var target = document.getElementById(id);    var msg = sessionStorage.getItem("message");
    target.innerHTML = msg;
}

sera également rechargé! ! ! ! Rendu

Parcours dapprentissage HTML5 - Présentation du stockage Web HTML5 (16)

Instance de stockage local

le code d'index n'a pas changé, code js 

/**
 * Created by joy liu on 2015/9/22.
 *///function saveStorage(id){//    var target = document.getElementById(id);//    var string = target.value;//    sessionStorage.setItem("message",string);//}//function loadStorage(id){//    var target = document.getElementById(id);//    var msg = sessionStorage.getItem("message");//    target.innerHTML = msg;//}function saveStorage(id){    var target = document.getElementById(id);    var string = target.value;
    localStorage.setItem("message",string);
}
function loadStorage(id){    var target = document.getElementById(id);    var msg = localStorage.getItem("message");
    target.innerHTML = msg;
}

effet Image

Parcours dapprentissage HTML5 - Présentation du stockage Web HTML5 (16)

En plus du canevas, une autre fonction très importante en HTML5 est le stockage local du stockage Web sur le client. Dans le passé, les noms d'utilisateur et d'autres informations pouvaient être stockés. dans les cookies sur le client. Plus tard, les problèmes suivants ont été trouvés dans le stockage des cookies :

Taille : la taille des cookies est limitée à environ 4 Ko

Bande passante : les cookies sont envoyés avec l'activité HTTP. , donc une partie de la bande passante est gaspillée

Complexité : Il est difficile de faire fonctionner correctement les cookies

En réponse aux problèmes ci-dessus, HTML5 propose une méthode pour sauvegarder les données localement : le stockage Web

Il dispose de deux méthodes de traitement Méthode :

stockage de session : Enregistrez les données dans l'objet de session. La session est le temps qui s'écoule entre le moment où un utilisateur ouvre le site Web et le moment où il ferme le site Web, c'est-à-dire le temps pendant lequel l'utilisateur navigue sur le site Web. L'objet de session peut enregistrer toutes les données pendant cette période.

Stockage local : enregistrez les données dans le matériel du client (disque dur) même si le navigateur de l'utilisateur est fermé. La prochaine fois que vous l'ouvrirez, le

instance de stockage de session

code index.html 

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>H5表格提交</title>
    <script src="appWeb.js"></script></head><body>
    <p id="msg"></p>
    <input type="text" id="input">
    <input type="button" value="保存数据" onclick="saveStorage(&#39;input&#39;)">
    <input type="button" value="读取数据" onclick="loadStorage(&#39;msg&#39;)"></body></html>

code appWeb 

/**
 * Created by joy liu on 2015/9/22.
 */function saveStorage(id){    var target = document.getElementById(id);    var string = target.value;
    sessionStorage.setItem("message",string);
}
function loadStorage(id){    var target = document.getElementById(id);    var msg = sessionStorage.getItem("message");
    target.innerHTML = msg;
}

sera également rechargé! ! ! ! Rendu

Parcours dapprentissage HTML5 - Présentation du stockage Web HTML5 (16)

Instance de stockage local

le code d'index n'a pas changé, code js

/**
 * Created by joy liu on 2015/9/22.
 *///function saveStorage(id){//    var target = document.getElementById(id);//    var string = target.value;//    sessionStorage.setItem("message",string);//}//function loadStorage(id){//    var target = document.getElementById(id);//    var msg = sessionStorage.getItem("message");//    target.innerHTML = msg;//}function saveStorage(id){    var target = document.getElementById(id);    var string = target.value;
    localStorage.setItem("message",string);
}
function loadStorage(id){    var target = document.getElementById(id);    var msg = localStorage.getItem("message");
    target.innerHTML = msg;
}

Rendu

Parcours dapprentissage HTML5 - Présentation du stockage Web HTML5 (16)

Ce qui précède est le contenu du parcours d'apprentissage Html5 - Aperçu du stockage Web Html5 (16) Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !


Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Parcours d'apprentissage H5-Entité H5 (14)Article suivant：Parcours d'apprentissage H5-Entité H5 (14)

Articles Liés

Voir plus