Introduction détaillée au stockage Web [traitement local des données HTML5]

L'éditeur suivant vous apportera une analyse approfondie du stockage Web [html5 traitement des données locales]. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Venez jeter un oeil avec l'éditeur, je vous souhaite à tous un bon jeu

1 Qu'est-ce que webStorage ?

webStorage est une méthode de stockage localisé en html5 Avant, nous utilisions la méthode de stockage du cookie;

. 2. Quelle est la différence entre eux ?

Ⅰ. Problèmes avec les cookies :

ⅰ Le cookie doit envoyer une requête au serveur, et le serveur renvoie un cookieId, qui est stocké dans le navigateur <.>le cache nécessite une certaine quantité de bande passante. [Les cookies seront envoyés avec les informations d'en-tête de chaque requête HTTP, ce qui augmente de manière invisible le trafic réseau];

ⅱ La capacité de données stockée par les cookies est limitée et varie en fonction du type de navigateur que IE6 peut uniquement stocker. environ 2K ;

Ⅱ. Et le stockage Web n'a besoin que de stocker les données localement ;

3. Nous pouvons donner un petit exemple pour illustrer par exemple : entrez le nom d'utilisateur et le mot de passe, cliquez sur le bouton

1 pour enregistrer les données, cliquez sur le bouton 2 et actualisez la page pour l'obtenir Processus :

ⅰ.Créer un

événement

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

• 
  

ⅱ. Obtenez son nom d'utilisateur via un identifiant

JavaScript

Code. Copier le contenu dans le presse-papier

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

ⅲObtenir son mot de passe via un identifiant

Code JavaScript

Copier le contenu dans le presse-papiers

ⅳ Après l'avoir obtenu, comment. est-ce qu'on stocke les données ? Il existe deux manières :

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

1. ① La première manière :
session
Storege, utilisé dans le

navigateur Firefox

;. Cycle de vie : Les données stockées de cette manière ne sont valables qu'au niveau de la fenêtre. Lorsque la même page de fenêtre (ou onglet) est actualisée ou sautée, les données stockées localement peuvent être obtenues lorsqu'elles sont nouvelles. Lors de l'ouverture d'une fenêtre ou d'une page, les données d'origine deviennent invalides [page actuelle uniquement]

Inconvénients : IE ne les prend pas en charge et ne peut pas réaliser un stockage de données persistant.

Code JavaScript

Copier le contenu dans le presse-papiers

1. Remarque : sessionStorage.setItem est stocké dans des paires clé-valeur ;

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

> LocalStorage fait partie de la spécification Web Storage Internet Storage et est désormais pris en charge dans Firefox 3.5, Safari 4 et IE8.

Cycle de vie : enregistré dans le lecteur C local, il sera toujours là après la fermeture et l'ouverture du navigateur

Inconvénients : les navigateurs de version inférieure ne le prennent pas en charge ;

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

• ⅴ.Imprimer

  
  

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

• ⅵ. Le bouton 2 imprime toutes les données ci-dessus

  
  La première façon d'imprimer :

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

• Deuxième façon d'imprimer

  
  

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

• Le résultat montre :

  
   

ⅶ.Extension : localStorage Méthode RemoveItem

Suivi des données locales :

Affichage des résultats :

    

  ⅷ.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>

   效果显示:

               

                     

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!