Maison  >  Article  >  interface Web  >  stockage Web – introduction détaillée au stockage Web

stockage Web – introduction détaillée au stockage Web

PHP中文网
PHP中文网original
2017-06-20 13:55:492141parcourir
  • Classification du stockage Web

    • Client et serveur

  • Comprendre le Web stockage

    • Avec le développement des applications Web, les utilisations du stockage côté client sont de plus en plus nombreuses, mais les moyens de mettre en œuvre le stockage côté client deviennent également de plus en plus nombreux. changement diversifié. Le moyen le plus simple et le plus compatible est celui des cookies, mais le stockage des cookies en tant que client réel présente encore de nombreux inconvénients. Dans le même temps, différents navigateurs disposent également de leurs propres méthodes de stockage. Par exemple, userData Behaviour peut être utilisé dans IE6 et versions ultérieures, globalStorage peut être utilisé dans Firefox et Flash Local Storage peut également être utilisé dans les plug-ins Flash. Cependant, ces méthodes présentent des inconvénients en termes de compatibilité et d'autres aspects, ainsi que côté client. le stockage n’appartient pas à la meilleure façon.

    • En raison de la situation ci-dessus, plusieurs nouvelles méthodes de stockage ont été ajoutées en html5. Base de données Web et stockage Web.

  • La différence entre les différentes méthodes de stockage

    • Comprendre le stockage Web

    • Avantages

    • Inconvénients

    • localStorage

    • sessionStorage 

    • Prise en charge du navigateur

    • Il s'agit d'une nouvelle façon pour le client de stocker des données en HTML5. Elle fournit une API facile à utiliser et n'a besoin que de définir la valeur clé. La taille des données stockées sous chaque domaine utilisateur est de 5 M à 10 M. Contient sessionStorage et localStorage ci-dessous. Dans le même temps, il inclut également une base de données Web.

    • La taille des données stockées est plus grande.

    • Les données stockées sont enregistrées côté client et n'ont pas besoin de communiquer avec le navigateur, ce qui peut réduire notre consommation de bande passante.

    • fournit une API riche et facile à utiliser, facilitant le développement pour les développeurs.

    • Utilisez un espace de stockage indépendant. Il existe un espace de stockage indépendant sous chaque domaine, et chaque espace est complètement indépendant, ce qui peut éviter toute confusion de données (ce n'est en fait pas très différent des cookies). ​​

    • Étant donné que les données stockées dans chaque domaine sont un espace indépendant, nous ne pouvons pas utiliser les données d'autres domaines sous un seul domaine.

    • Étant donné que les données stockées sont toujours enregistrées sans notre suppression active et que les données ne sont pas cryptées, il est facile de provoquer un vol de données.

    • LocalStorage est une méthode de stockage sans limite de temps, à moins que nous effacions activement les données nous-mêmes, les données ne seront pas perdues. ​

    • sessionStorage est une méthode de stockage pour les sessions. Lorsque notre navigateur ou notre fenêtre d'opération est fermée, les données stockées dans sessionStorage seront perdues. Il ne peut être utilisé que sur les pages de la même session au même moment.

    • IE8.0 ou supérieur, Firefox3.0 ou supérieur, Opera10.5 ou supérieur, Chrome3.0 ou supérieur, Safari4.0 ou supérieur.

    • Comment fonctionnent les cookies

    • Avantages

    • Inconvénients

    • En tant que méthode de stockage côté client, les cookies utilisent principalement le stockage de texte. Lorsqu'une application utilise des cookies, le serveur enverra le cookie au client et celui-ci l'enregistrera. Lors de la prochaine visite de l'utilisateur, le cookie stocké sur le client sera envoyé au serveur. En développement, le cas le plus typique est celui utilisé pour stocker les informations utilisateur.

    • Simple et pratique

    • Le navigateur se charge de l'envoi des données

    • Le navigateur gère différents sites en eux-mêmes Les données ne sont pas sujettes à la confusion des données

    • Comme mentionné ci-dessus, le principe de fonctionnement des cookies est que nous communiquons de serveur à client et de client à serveur. Cela entraîne une consommation inutile de bande passante et affecte également la vitesse de chargement de la page, ce qui entraîne une mauvaise expérience utilisateur.

    • Limite de taille des données stockées, le cookie ne peut stocker que 4 Ko de données.

    • Sécurité. Les données des cookies sont stockées sur le client sous forme de texte, ce qui présente une très faible sécurité et peut facilement conduire à un vol de données.

    • Limite de quantité. Le nombre de cookies que la plupart des navigateurs peuvent stocker est de 30 à 50, et certains navigateurs en prennent en charge 300, tandis qu'IE6 n'en prend en charge que 20.

    • Intégrité des données. Lorsque notre client est réglé sur le niveau de sécurité le plus élevé, nos cookies expireront.

    • Avantages et inconvénients des cookies

    • Avantages et inconvénients du stockage Web

  • Exemple de code

    • Remarque : localStorage et sessionStorage stockent les deux objets chaîne.

    • Créer

    • Obtenir du stockage

    • Supprimer le stockage

    • <script type="text/javascript">// 创建均使用localStorage做示例,sessionStorage语法方式和localStorage是一样的,localStorage(key, value);或者localStorage.key = "value";window.onload = function(){if (window.localStorage) {
                      localStorage.setItem("userName", "张三");}
              }</script>

        

    • <script type="text/javascript">window.onload =  (window.localStorage &&"userName", "张三""userName"</script>

      >


    • <script type="text/javascript">window.onload =  (window.localStorage &&"userName", "hello,world!"</script>
       


    • Détecter si le navigateur actuel prend en charge

    •     <script type="text/javascript">// 验证当前的浏览器是否支持localStorage和sessionStoragewindow.onload = function(){if (window.localStorage && window.sessionStorage) {alert("你的浏览器支持localStorage和sessionStorage");
                  }
              }</script>

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!

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