HTML5 WebStorage(HTML5 로컬 저장 기술)_CSS/HTML

WebStorage는 HTML5의 로컬 저장소 솔루션 중 하나입니다. HTML5의 WebStorage 개념이 도입되기 전에는 IE 사용자 데이터, 플래시 쿠키, Google Gears 및 기타 신뢰할 수 없는 솔루션이 제거된 브라우저 호환 로컬 저장소 솔루션입니다. 쿠키만 사용합니다. 일부 학생들은 쿠키 로컬 저장소가 있는데 왜 WebStorage 개념을 도입해야 합니까?라고 질문할 수 있습니다.

쿠키가 왜 이래

쿠키의 단점은 너무나 뻔합니다

1. 데이터 크기: 저장 컨테이너로서 쿠키의 크기는 약 4KB로 제한되어 있으며 이는 특히 현재의 복잡한 비즈니스 로직 요구 사항에 대해 일부 구성 필드를 저장하는 것 외에도 간단한 저장도 가능합니다. 단일 값 정보. 대부분의 개발자는 실제로 무엇을 기대해야 할지 모릅니다.
2. 보안 문제: HTTP 요청의 쿠키는 일반 텍스트로 전달되므로(HTTPS는 그렇지 않음) 보안 문제는 여전히 큽니다.
3. 네트워크 부담: 쿠키가 각 HTTP 요청에 첨부되고 HttpRequest 및 HttpResponse의 헤더로 전송되므로 불필요한 트래픽 손실이 추가된다는 것을 알고 있습니다.

웹스토리지

WebStorage는 HTML을 위한 새로운 로컬 저장소 솔루션 중 하나이지만 쿠키를 대체하기 위해 개발된 표준은 아닙니다. 쿠키는 클라이언트 및 서버 통신을 처리하는 HTTP 프로토콜의 일부로 필수적입니다. 구현에 따라 다릅니다. 상태 지속성. WebStorage의 목적은 쿠키를 사용해서는 안 되지만, 쿠키를 사용해야 하는 로컬 저장 문제를 해결하는 것입니다.
WebStorage는 localStorage와 sessionStorage라는 두 가지 유형의 API를 제공합니다. 두 가지의 차이점은 이름을 보면 대략적으로 알 수 있습니다. localStorage는 명시적으로 삭제되거나 지워지지 않는 한 데이터를 로컬에 영구적으로 저장합니다. 해당 세션은 일정 기간 동안 유효하며 브라우저를 닫으면 자동으로 삭제됩니다. 두 개체 모두 공통 API를 가지고 있습니다.

코드 복사 코드는 다음과 같습니다.

interface Storage {
readonly attribute unsigned 긴 길이;
DOMString? 키(부호 없는 긴 인덱스);
getter DOMString getItem(DOMString 키);
setter 생성자 void setItem(DOMString 키, DOMString 값);
deleter void RemoveItem(DOMString 키) );
무효 클리어();
};

1. 길이: 저장소의 키-값 쌍 수를 가져오는 데 사용되는 유일한 속성, 읽기 전용입니다.
2. key: 인덱스를 기반으로 스토리지의 키 이름을 가져옵니다.
3. getItem: 키를 기반으로 스토리지의 해당 값을 가져옵니다.
4. setItem: 키-값 쌍을 추가합니다. 저장소
5.removeItem: 키 이름에 따라 키-값 쌍을 삭제합니다
6. 지우기: 저장소 개체를 지웁니다

WebStorage 사용 방법

WebStorage를 구현한 브라우저에서 페이지에는 localStorage와 sessionStorage라는 두 개의 전역 개체가 있습니다.

localStorage를 예로 들어 보겠습니다. , 간단한 연산 코드를 보세요

코드 복사 코드는 다음과 같습니다

var ls=localStorage;
            console.log(ls.length);//0
            ls.setItem('name','Byron');
            ls.setItem(' age','24');
            console.log(ls.length);//2

            //遍历localStorage
            for(var i=0;i                /*
                  나이 : 24
                 이름 : 바이런
         */                var key=ls.key(i);
                console.log(key+' : '+ls .getItem(key));
            }

            ls.removeItem('age');

          
            for(var i=0;i               /*
                  이름 : 바이런
               */
              var key=ls.key(i);                console.log(key+' : '+ls.getItem(key));
            }
            ls.clear();//0
            console.log(ls.length);

사례

동일한 HTML5가 정의하는 저장소 작업, WebStorage에서 WebStorage发生变化적 时候触发, 可以용 此监视가 다른 저장소에 대한 작업
🎜>

复代码 代码如下:

interface StorageEvent : Event {
  읽기 전용 속성 DOMString key;
  읽기 전용 속성 DOMString? oldValue;
  읽기 전용 속성 DOMString? newValue;
  읽기 전용 속성 DOMString url;
  읽기 전용 속성 저장소? StorageArea;
};

1、key:键值对的键
2、oldValue：修改之前的value
3、newValue：修改之后的value
4、url：触发改动的页faceurl
5、StorageArea：发生改变的Storage
재index.php중정义

复代码 代码如下:

테스트

复主代码 代码如下:

window.addEventListener('storage',function(e) {
               console.log(e.key+'는 '+e.url에 의해 '+e.oldValue+'에서 '+e.newValue+'로 변경됨);
               console.log(e.storageArea ==localStorage) ;
            },false);

            localStorage.setItem('userName','Byron');

test.php

复aze代码 代码如下:

localStorage.setItem('userName ','캐스퍼');

Lorsque vous cliquez sur le lien sur la page index.php pour accéder à test.php, vous pouvez voir le journal de sortie de la console d'index.php :
userName est modifié de Byron à Casper par http://localhost/test .php
vrai

Pourquoi c'est mieux que les cookies

1. En termes de capacité, WebStorage fournit généralement 5M d'espace de stockage dans les navigateurs, ce qui n'est pas suffisant pour stocker des vidéos et des images, mais c'est suffisant pour la plupart des opérations
2 En termes de sécurité, WebStorage ne le fait pas. joue un rôle L'en-tête HTTP est envoyé par le navigateur, il est donc relativement sûr
3. En termes de trafic, comme WebStorage n'est pas transmis au serveur, le trafic inutile peut être économisé, ce qui reste très pratique pour les hautes fréquences visites ou pages Web ciblant les appareils mobiles. Pas mal.
Cela ne signifie pas que WebStorage peut remplacer les cookies, mais avec WebStorage, les cookies ne peuvent faire que ce qu'ils sont censés faire : servir de canal d'interaction entre le client et le serveur et maintenir l'état du client. WebStorage est donc supérieur aux cookies, tout comme une solution de stockage local.

Choses à noter

1. Compatibilité des navigateurs, c'est presque la plus simple à implémenter parmi toutes les nouvelles fonctionnalités HTML5, car les navigateurs IE8+ la prennent en charge, et dans IE7, IE6 peut être implémenté. en utilisant les données utilisateur d'IE.

2. Puisque localStorage et sessionStorage sont tous deux des objets, vous pouvez également obtenir et modifier des paires clé-valeur via ".key" ou "[key]", mais cela n'est pas recommandé.

 2. 由于localStorage和sessionStorage都是对象，所以我饿每年也可以通过”.key”或”[key]”的方式获取、修改键值对，但不推荐这么做 。

复制代码 代码如下:

localStorage.userName='Frank';
console.log(localStorage['userName']);

3.虽然localStorage存储在本地，但不同的浏览器存储存储数据是独立的，所以在Chrome上存储的localStorage在FireFox上是获取不到的。
4. localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理，低版本IE可以使用json2.js
5.除了控制台，Chrome还为本地存储提供了非常直观的显示方式，调试的时候很方便

Copier le code Le code est le suivant :

localStorage.userName='Frank'; console.log(localStorage['userName']);

3. Bien que localStorage soit stocké localement, différents navigateurs stockent les données indépendamment, de sorte que le localStorage stocké sur Chrome n'est pas disponible. sur FireFox. 4. localStorage et sessionStorage ne peuvent stocker que des types de chaînes. Pour les objets complexes, vous pouvez utiliser le stringify et l'analyse des objets JSON fournis par ECMAScript pour les gérer. Pour les versions inférieures d'IE, vous pouvez utiliser json2.js. 5. En plus de la console, Chrome propose également une méthode d'affichage très intuitive du stockage local, très pratique lors du débogage