HTML5 로컬 저장소 관련 설명

편집자 추천: 이 기사는 Hacker Magazine에서 가져온 것입니다. HTML5를 배우는 개발자라면 놓칠 수 없는 HTML5 저장 방법에 대한 매우 포괄적인 소개와 분석을 제공합니다.
HistoryHTML5 로컬 저장소 이전에는 클라이언트에 영구 데이터를 저장하려는 경우

1. HTTP 쿠키와 같은 몇 가지 옵션이 있었습니다. HTTP 쿠키의 단점은 명백합니다. 최대 4KB의 데이터만 저장할 수 있으며 각 HTTP 요청은 SSL을 사용하지 않는 한 일반 텍스트로 서버에 다시 전송됩니다.

2. IE userData. userData는 1990년대 브라우저 전쟁 중에 Microsoft가 출시한 로컬 저장소 솔루션으로, DHTML의 동작 속성을 사용하여 각 페이지에서 최대 64K의 데이터를 저장할 수 있으며 각 사이트에서는 최대 640K의 데이터를 저장할 수 있습니다. userData의 단점은 명백합니다. 이는 웹 표준의 일부가 아니므로 애플리케이션이 IE만 지원해야 하는 경우가 아니면 거의 쓸모가 없습니다.

3. 플래시 쿠키. 플래시 쿠키의 이름은 실제로 HTTP 쿠키와 동일하지 않습니다. 아마도 이름을 "플래시 로컬 저장소"라고 불러야 할 것입니다. 플래시 쿠키를 사용하면 기본적으로 100K 이하의 데이터를 저장할 수 있습니다. 이를 초과하면 Flash는 자동으로 사용자에게 더 많은 저장 공간을 요청합니다. Flash의 외부 인터페이스 인터페이스를 사용하면 Javascript를 통해 Flash의 로컬 저장소를 쉽게 작동할 수 있습니다. 플래시의 문제점은 단순히 플래시라는 것입니다.

4. Google Gears. Gears는 Google이 2007년에 출시한 오픈 소스 브라우저 플러그인으로, 주요 브라우저의 호환성 향상을 목표로 하고 있으며, SQLite 기반의 SQL 데이터베이스가 내장되어 있으며, 사용자 확보 후 데이터베이스에 액세스할 수 있는 통합 API를 제공합니다. 승인을 받으면 각 사이트는 SQL 데이터베이스에 모든 크기의 데이터를 저장할 수 있습니다. Gears의 문제는 Google 자체가 더 이상 이를 사용하지 않는다는 것입니다.

현재 상황우리가 일반적으로 HTML5 로컬 저장소라고 부르는 것은 이제 일반적으로 웹을 의미합니다. 저장소 사양, 이 표준은 한때 HTML5 사양의 일부였지만 나중에 여러 가지 이유로 HTML5 사양에서 분리되었습니다. 그러나 웹 저장소 외에도 HTML5의 로컬 저장소 표준에 대한 두 가지 다른 경쟁자가 있습니다: 웹 SQL 데이터베이스와 IndexedDB. 이 3가지 사양을 차례로 살펴보겠습니다.
웹 저장소웹 저장소는 현재 가장 널리 지원되는 HTML5 로컬 저장소 사양입니다: IE 8+, FF 3.5+, Safari 4+, Chrome 4+, Opera 10.5+, iPhone 2+ 및 Android 2+ 웹 저장소가 이미 지원되는지 확인하려면 다음 기능을 사용하세요.

Code

2. function supports_html5_storage() {  
       try {  
           return 'localStorage' in window && window['localStorage'] !== null;  
       } catch (e) {  
           return false;  
       }  
   }

HTML5 저장소는 사용이 매우 간단합니다.

코드

2. var foo = localStorage.getItem("bar");  
   // ...  
   localStorage.setItem("bar", foo);

你也可以写成下面这样： 

代码 

2. var foo = localStorage["bar"];  
   // ...  
   localStorage["bar"] = foo;

如果要将某个key从存储空间删除，可以调用removeItem： 

代码 

1. localStorage.removeItem(
   'foo'
   );

你也可以像遍历数组那样遍历存储的所有键值对象： 

代码 

2. for(var i=0; ivar key = localStorage.key(i);  
       console.log(key + ":" + localStorage[key]);  
   }

如果你的程序需要在不同页面访问同一个值，你可能需要了解这个值是否已经被其他页面改变了，这可以通过向浏览器注册storage事件来实现： 

代码 

2. window.addEventListener('storage', function(e) {  
       console.log(e.key + "'s value is changed from '" +  
           e.oldValue + "' to '" + e.newValue + "' by " + e.url);  
   }, false);  
   //A页面  
   localStorage['foo'] = 'bar';  
   //B页面  
   localStorage['foo'] = 'newBar';

这时你应该会在A页面的Console中看到： 
foo’s value is changed from ‘bar’ to ‘newbar’ by http://localhost/test.html 
要注意的是，storage事件仅仅只是通知你某个键对应的值已经发生了改变，你没有办法在回调中阻止这个改变发生。 
HTML5 Storage看起来不错，那它有没什么缺点呢？好问题。要说HTML5 Storage的缺点，唯一的问题就是它默认的QUOTA只有5MB，并且你没办法通过程序自行或是提示用户来增加存储空间。唯一的办法就是用户自己打开 浏览器的设置，并手动修改QUOTA的大小，如果超出了5MB的限制，你将会遇到一个“QUOTA_EXCEEDED_ERR”的错误。 
Web SQL DatabaseWeb SQL Database是一个已经废弃的规范，但是鉴于除了IE和Firefox，其他浏览器都已经实现了Web SQL Database，并且它还具有一些HTML5 Storage所不具有的特性，所以还是值得了解一下的。 
Web SQL Database就像它的名字那样，就是一个让你可以在Web上直接使用的SQL数据库，你要做的就是打开数据库，然后执行SQL，和你对Mysql做的事情没什么两样： 

代码 

2. openDatabase('documents', '1.0', 'Local document storage', 5*1024*1024,  
   function (db) {  
       db.changeVersion('', '1.0', function (t) {  
           t.executeSql('CREATE TABLE docids (id, name)');  
       }, error);  
   });

关于Web SQL Database的更多介绍，可以参看这篇指南。 
但是它的缺点也同样明显。最大的问题就出在SQL上，实际上并不存在一种叫做SQL的标准结构化查询语言，我们平常使用的实际上是MS SQL、Oracle SQL、MySQL SQL、postgre SQL或者SQLite SQL（尽管有一个叫做SQL-92的规范，但它基本形同虚设），更进一步，甚至都不存在SQLite SQL，我们使用的实际上是SQLite x.y.z SQL，而这也就是Web SQL Database最大的问题，它无法统一各个浏览器厂商实现的SQL语言，如果你的某条Web SQL查询只能在Chrome上运行，这还能叫做标准吗？ 
所以，如果你现在访问Web SQL Database的规范页面，你会在顶部看到这样一则声明： 
这个规范已经陷入了一个僵局：目前的所有实现都是基于同一个SQL后端（SQLite），但是我们需要更多的独立实现来完成标准化，所以除非有厂商愿意独立实现这个规范，否则当前的SQL规范只能采用SQLite的SQL方言，而作为一个标准，这是不可接受的。 
IndexedDB最后我们要介绍的就是IndexedDB了，相比其他两个规范，目前只有Firefox实现了IndexedDB（顺便提一下，Mozilla表示它们永远不会去实现Web SQL Database），不过Google已经表示正在考虑在Chrome中加入IndexDB支持。 
IndexedDB引入了一个object store的概念，这有点像是一个SQL Database，你可以在“数据库”中存储“记录”，并且每条“记录”可以拥有很多“字段"，每个字段都有一个特定的数据类型，你可以选择记录的子集， 并使用“光标”进行遍历，同时object store中的所有变更都是基于“事务”的。 
下面让我们来看一个小例子： 

代码 

2. var request = window.indexedDB.open("CandyDB",  
                                       "My candy store database");  
   request.onsuccess = function(event) {  
     var db = event.result;  
     if (db.version != "1") {  
       // User's first visit, initialize database.  
       var createdObjectStoreCount = 0;  
       var objectStores = [  
         { name: "kids", keyPath: "id", autoIncrement: true },  
         { name: "candy", keyPath: "id", autoIncrement: true },  
         { name: "candySales", keyPath: "", autoIncrement: true }  
       ];  
       function objectStoreCreated(event) {  
         if (++createdObjectStoreCount == objectStores.length) {  
           db.setVersion("1").onsuccess = function(event) {  
             loadData(db);  
           };  
         }  
       }  
       for (var index = 0; index < objectStores.length; index++) {  
         var params = objectStores[index];  
         request = db.createObjectStore(params.name, params.keyPath,  
                                        params.autoIncrement);  
         request.onsuccess = objectStoreCreated;  
       }  
     }  
     else {  
       // User has been here before, no initialization required.  
       loadData(db);  
     }  
   };

关于Indexed的更多介绍可以参看Mozilla Blog的这篇指南。

本文讲解了关于HTML5本地存储的相关内容，更多相关内容请关注php中文网。

相关推荐：

PHP 보안 문자 인증 코드 클래스에 대한 설명

MySQL 정보_스키마 관련 내용

mysql 데이터베이스 크기, 테이블 크기 및 마지막 수정 시간 보기

위 내용은 HTML5 로컬 저장소 관련 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!