Quelle est la différence entre sessionStorage et localStorage-tutoriel php-php.cn

Quelle est la différence entre sessionStorage et localStorage

一个新手

Libérer： 2023-03-15 19:30:01

original

21136 Les gens l'ont consulté

La différence entre sessionStorage et localStorage est la suivante : 1. localStorage n'a pas de délai d'expiration ; 2. sessionStorage stocke les données d'une session et le cycle de vie est le même que celui de la session. Lorsque l'utilisateur ferme le navigateur, le les données seront supprimées.

Quelle est la différence entre sessionStorage et localStorage

La différence entre sessionStorage et localStorage

Comme nous le savons tous, depuis l'émergence du standard HTML 5, le stockage localisé est devenu autrefois un mot-clé très recherché. Au début de HTML 5, il existait deux méthodes de stockage local : l'une était le stockage Web et l'autre était le Web SQL. Étant donné que l'implémentation de Web SQL est basée sur SQLite, elle est plus encline à s'orienter vers DataBase, et le W3C a officiellement annoncé en novembre 2011 qu'il ne maintiendrait plus la spécification Web SQL, de sorte que son interface API n'entre actuellement pas dans le champ d'application. de HTML 5. Par conséquent, le stockage local HTML 5 dont nous parlons souvent fait actuellement principalement référence au stockage Web.

Ce qui suit est une description et une explication détaillées de WebStorage et de ses deux formes.

1. webStorage

webStorage est une fonction importante introduite par HTML5. Elle est souvent utilisée dans le processus de développement front-end. sur le client Les données stockées localement sont similaires aux cookies, mais leur fonction est beaucoup plus puissante que les cookies. La taille du cookie n'est que d'environ 4 Ko (les différents navigateurs ont des tailles différentes), tandis que la taille du webStorage est de 5 Mo. Les méthodes fournies par son API sont les suivantes :

setItem(key, value) - enregistre les données et stocke les informations sous forme de paires clé-valeur.

getItem(key)——Récupérez les données et transmettez la valeur de la clé pour obtenir la valeur correspondante.

removeItem(key)——Supprimez une seule donnée et supprimez les informations correspondantes en fonction de la valeur de la clé.

clear()——Supprimer toutes les données

key(index)——Obtenir la clé d'un index

localStorage

Le cycle de vie de localStorage est permanent. Si vous utilisez localStorage pour stocker des données, même si vous fermez le navigateur, les données ne disparaîtront pas à moins que vous ne les supprimiez activement. La méthode utilisée est celle indiquée ci-dessus. localStorage a un attribut de longueur, vous pouvez vérifier le nombre d'enregistrements de données dont il dispose. L'utilisation est la suivante :

     var storage = null;
         if(window.localStorage){              //判断浏览器是否支持localStorage
            storage = window.localStorage;     
            storage.setItem("name", "Rick");    //调用setItem方法，存储数据
            alert(storage.getItem("name"));     //调用getItem方法，弹框显示 name 为 Rick
            storage.removeItem("name");     //调用removeItem方法，移除数据
            alert(storage.getItem("name"));   //调用getItem方法，弹框显示 name 为 null
 
         }

Copier après la connexion

localStorage est plus simple que sessionStorage, et il n'y a pas beaucoup de choses auxquelles faire attention.

3. sessionStorage

Le cycle de vie de sessionStorage se déroule avant la fermeture du navigateur. En d’autres termes, les données existeront toujours jusqu’à la fermeture complète du navigateur. sessionStorage a également un attribut length, et son jugement et son utilisation de base sont les mêmes que ceux de localStorage. Les points suivants doivent être notés :

<1> L'actualisation de la page n'effacera pas les données

Pour vérification, j'ai préparé deux fichiers html, dont un index . html et l'autre est text.html. Quant à text.html, son origine sera discutée en détail plus tard. Les codes html des deux sont les suivants :

index.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <script>
            function submit() {
                var str = document.getElementById("text").value.trim();
                setInfo(str);
                document.getElementById("text").value = "";
            }
            //储存数据
            function setInfo(name) {
                var storage = window.sessionStorage;
                storage.setItem(&#39;name&#39;, name);
            }
            //显示数据
            function shows() {
               var storage = window.sessionStorage;
               var str = "your name is " + storage.getItem("name");
               document.getElementById("text").value = str;
            }
         </script>
    </head>
    <body>
         <input type="button" value="Login" οnclick="submit()" />
         <input type="text" name="text" id="text" />
         <input type="button" value="show" οnclick="shows()" />
         <a href="text.html" target="_blank">点击打开</a>
    </body>
    </html>

Copier après la connexion

La page text.html est la suivante :

     <!DOCTYPE html>
     <html>
     <head>
         <meta charset="UTF-8">
         <title>Title</title>
     </head>
     <body>
         <script>
             var storage = window.sessionStorage;
             alert(storage.getItem("name"));
         </script>
     </body>
     </html>

Copier après la connexion

Le résultat de l'ouverture la page index.html est la suivante :

Quelle est la différence entre sessionStorage et localStorage

Lorsque vous cliquez sur le bouton Afficher, "votre nom est nul" s'affiche dans la zone de saisie. À ce moment, il y a. aucune donnée avec la valeur clé « nom » stockée dans sessionStorage. Après avoir entré « Rick » dans le texte, cliquez sur le bouton de connexion. Lorsque la zone de saisie est effacée, les données ont été stockées dans sessionStorage. Cliquez ensuite sur le bouton Afficher et « votre nom est Rick » s'affichera. À ce stade, cliquez sur le navigateur pour actualiser la page Web, puis cliquez sur le bouton Afficher. La zone de saisie affiche toujours « votre nom est Rick »

La page peut être utilisée. Accéder aux données de sessionStorage ;

Vous vous souvenez de la page text.html préparée. C'est maintenant à son tour de jouer son rôle. Afin de vérifier, nous suivons les étapes ci-dessus et ouvrons text.html Le résultat est le suivant :

Quelle est la différence entre sessionStorage et localStorage

Comme vous pouvez le voir, cette valeur est nulle et la valeur de. Le « nom » ne peut pas être obtenu. Maintenant, fermez la page text.html et ouvrez le lien en cliquant sur la page index.html. Vous pouvez voir les résultats suivants :

Quelle est la différence entre sessionStorage et localStorage

Par conséquent, vous pouvez le savoir sur. l'heure actuelle Le lien ouvert sur la page permet d'accéder aux données dans sessionStorage. Plus tard, après quelques autres tests, j'ai découvert qu'après avoir ouvert la page text.html à partir de index.html, fermé index.html et actualisé text.html, les données de sessionStorage étaient également accessibles. Les données de sessionStorage ne peuvent être éliminées que lorsque index.html et toutes les pages ouvertes à partir de celui-ci sont fermés ou que le navigateur est fermé directement.

Utiliser window.open pour ouvrir la page et modifier la méthode localtion.href peut obtenir les données dans sessionStorage

Les deux méthodes ci-dessus ont été testées . Et c’est effectivement le cas. Les étudiants intéressés peuvent réellement tester les résultats. Je ne résumerai pas les différences entre localStorage et sessionStorage.

En bref, lors de son utilisation, faites attention aux points mentionnés ci-dessus, et vous pourrez éviter de nombreux pièges inutiles lors de son utilisation.

Pour plus de connaissances connexes, veuillez visiter le Site Web PHP chinois ! !

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!