Puisque HTTP est apatride, qui êtes-vous ? Qu'est-ce que tu as fait? Désolé, le serveur ne le sait pas.
Ainsi apparaît la session, qui stocke les informations utilisateur sur le serveur pour une utilisation future (telles que le nom d'utilisateur, les achats dans le panier, etc.).
Mais la session est temporaire et sera supprimée lorsque l'utilisateur quittera le site. Si vous souhaitez stocker des informations de manière permanente, vous pouvez les sauvegarder dans une base de données !
Comment fonctionne la session : créez un identifiant de session (noyau !!!) pour chaque utilisateur. L'identifiant de session est stocké dans le cookie, ce qui signifie que si le navigateur désactive les cookies, la session deviendra invalide ! (Mais cela peut être réalisé d'autres manières, par exemple en transmettant l'identifiant de session via l'URL)
L'authentification des utilisateurs utilise généralement la session.
cookies:Objectif : Données stockées localement côté client (généralement cryptées) pour un site Web afin d'identifier un utilisateur.
Le cookie sera transporté (même s'il n'est pas nécessaire) dans la requête http de la même origine, c'est-à-dire échangé entre le client et le serveur !
La taille des données du cookie ne dépasse pas 4k
Durée de validité des cookies : La durée de validité des cookies définie est valable jusqu'à l'heure d'expiration, même si le navigateur est fermé !
localStorage & sessionStorage：Au début, les cookies étaient couramment utilisés pour la mise en cache locale, mais le stockage Web doit être plus sûr et plus rapide !
Ces données ne sont pas enregistrées sur le serveur (stockées sur le client) et n'affectent pas les performances du serveur !
Le stockage de données sessionStorage et localStorage a également des limites de taille, mais ils sont beaucoup plus grands que les cookies et peuvent atteindre 5 M ou même plus !
localStorage : stockage de données sans limite de durée !
sessionStorage : Comme le montre le sens anglais, il s'agit du stockage des données de la session, donc après que l'utilisateur ferme le navigateur (onglet/fenêtre), les données sont supprimées !
Prise en charge du stockage Web HTML5 :IE8 ou supérieur, navigateur moderne.
Les données sont stockées dans des paires clé-valeur :
localStorage et sessionStorage ont les méthodes suivantes :
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>stockage Web</title></head><body> <div id=test></div> <script> if (typeof (Stockage) != non défini) { localStorage.name = 'xiao ming'; localStorage.setItem('name1', 'Apple'); document.getElementById('test').innerHTML = vous êtes : + localStorage.name console.log( d'abord : + localStorage.name1 + , + localStorage.key(0)); localStorage.removeItem('name1'); console.log(deuxième : + localStorage.name1); console.log(troisième : + localStorage.getItem('name')); localStorage.clear(); document.getElementById('test').innerHTML = Mettez à jour votre navigateur ! Actuellement, le navigateur ne prend pas en charge le stockage ; } </script></body></html>Résultats de l'exécution du programme :
Remarque : Les paires clé-valeur sont stockées sous forme de chaînes et le type doit être modifié en fonction des exigences (par exemple, pour un ajout, passez au type Nombre).
Cache d'application HTML5 :En créant un fichier manifeste de cache, les applications Web peuvent être mises en cache et accessibles sans connexion réseau !
Avantages du cache d'application :1. Navigation hors ligne ;
2. Vitesse plus rapide : les ressources mises en cache sont chargées plus rapidement ;
3. Réduisez la charge du navigateur : le client téléchargera ou mettra à jour uniquement les ressources modifiées à partir du serveur.
Statut de prise en charge :
IE10 ou supérieur, navigateur moderne.
utiliser:
<!DOCTYPE html><html manifest=demo.appcache></html>
Remarque : Pour activer le cache de l'application, vous devez spécifier l'attribut manifeste (extension : .appcache) ; si l'attribut manifeste n'est pas spécifié, la page ne sera pas mise en cache (sauf si la page est directement spécifiée dans le fichier manifeste !)
Le fichier manifeste doit être correctement configuré avec MIME-type: text/cache-manifest sur le serveur.
Fichier manifeste :Le manifeste est un simple fichier texte qui indique au navigateur ce qui est mis en cache et ce qui ne l’est pas !
Le manifeste peut être divisé en trois parties :MANIFESTE DE CACHE : les fichiers répertoriés ici seront mis en cache après le premier téléchargement !
RÉSEAU : Les fichiers répertoriés dans cet élément nécessitent une connexion réseau avec le serveur et ne seront pas mis en cache !
FALLBACK : Cet élément répertorie la page de secours lorsque la page n'est pas accessible (comme : page 404) !
test.appcache :
CACHE MANIFEST#2017 11 21 v10.0.1/test.css/logo.gif/main.jsNETWORK/login.php/register.phpFALLBACK#/html/Lorsque les fichiers du répertoire ne sont pas accessibles, utilisez /offline.html au lieu de /html/ / hors ligne.htmlMettre à jour le cache de l'application :
1. L'utilisateur efface le cache du navigateur !
2.Le fichier manifeste est modifié (# : indique un commentaire, et s'il est modifié en #2018 1 1 v20.0.0, le navigateur se remettra en cache !)
3. Le programme met à jour le cache de l'application !
Travailleurs du Web :Les Web Workers sont du Javascript qui s'exécute en arrière-plan, indépendamment des autres scripts et n'affectera pas les performances de la page !
Lors de l'exécution d'un script sur une page HTML générale, la page ne répondra que si le script est chargé !
Prise en charge : IE10 ou supérieur, navigateurs modernes
Exemple : fichier html :
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>travailleur Web</title></head><body> <p>Nombre : <output id=count></output></p> <bouton onclick=startWorker()>Démarrer</button> <button onclick=overWorker()>Fin</button> <script> var w; function startWorker(){ // Vérifiez si le navigateur prend en charge le Web Worker if(typeof(Worker) !=='undefined'){ if(typeof(w)=='undefined'){ //Créer un objet de travail Web w=new Worker('testWorker.js' } // L'événement continue d'être écouté (même si le script externe est terminé) à moins qu'il ne soit terminé w.onmessage=function(event){ document.getElementById('count').innerHTML=event.data } }else{ document.getElementById; ('count' ).innerHTML='Le navigateur ne prend pas en charge les web Workers'; } } function overWorker() { // Terminer le Web Objet Worker, libère les ressources du navigateur/ordinateur w.terminate(); w=undefined } </script></body></html>Fichier testWorker.js :
var i=0;function timedCount() { i+=1; //La partie importante, renvoyer une information à la page html postMessage(i); setTimeout('timedCount()',500);}timedCount();Remarque 1 : généralement, les Web Workers ne sont pas utilisés pour des tâches aussi simples, mais pour des tâches qui consomment plus de ressources CPU !
Remarque 2 : l'exécution dans Chrome entraînera l'erreur "impossible d'accéder à partir de l'origine 'null'". Ma solution est la suivante : ouvrez Apache dans xampp et utilisez http://localhost/ pour y accéder.
Inconvénients du travailleur Web :Le Web Worker se trouvant dans un fichier externe, il ne peut pas accéder aux objets javascript suivants :
L'événement envoyé par le serveur est un transfert d'informations à sens unique ; la page Web peut obtenir automatiquement des mises à jour du serveur !
Auparavant : la page Web demandait d'abord si des mises à jour étaient disponibles, le serveur envoyait les données et les mises à jour étaient effectuées (transfert de données bidirectionnel) !
Statut de support : tous les navigateurs modernes, à l'exception d'IE, le prennent en charge !
Exemple de code : fichier html :
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>supprimer l'événement envoyé</title></head><body> <p>supprimer les informations sur l'événement envoyé</p> <div id=test></div> <script> // Détermine si le navigateur prend en charge EventSource if(typeof(EventSource)!==undefined){ // Crée un objet EventSource var source=new EventSource(test.php); Écoute d'événement source.onmessage=function(event){ document.getElementById('test').innerHTML+=event.data+<br> } }else{; document.getElementById('test').innerHTML=désolé, le navigateur ne prend pas en charge les événements envoyés par le serveur } </script></body></html>test.php：
<?phpheader('Content-Type:text/event-stream');header('Cache-Control:no-cache');$time=date('r');echo data:L'heure du serveur est : {$ time} /n/n;// Actualiser les données de sortie flush();Remarque : Il n'y a aucun contenu derrière, le fichier php peut être omis ?> Fermer !
WebSocket HTML5 :WebSocket peut être utilisé pour la communication entre plusieurs onglets !
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.