HTML5 로컬 저장소 관련 설명-H5 튜토리얼-php.cn

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

HTTP 쿠키와 같은 몇 가지 옵션이 있었습니다. HTTP 쿠키의 단점은 명백합니다. 최대 4KB의 데이터만 저장할 수 있으며 각 HTTP 요청은 SSL을 사용하지 않는 한 일반 텍스트로 서버에 다시 전송됩니다.
IE userData. userData는 1990년대 브라우저 전쟁 중에 Microsoft가 출시한 로컬 저장소 솔루션으로, DHTML의 동작 속성을 사용하여 각 페이지에서 최대 64K의 데이터를 저장할 수 있으며 각 사이트에서는 최대 640K의 데이터를 저장할 수 있습니다. userData의 단점은 명백합니다. 이는 웹 표준의 일부가 아니므로 애플리케이션이 IE만 지원해야 하는 경우가 아니면 거의 쓸모가 없습니다.
플래시 쿠키. 플래시 쿠키의 이름은 실제로 HTTP 쿠키와 동일하지 않습니다. 아마도 이름을 "플래시 로컬 저장소"라고 불러야 할 것입니다. 플래시 쿠키를 사용하면 기본적으로 100K 이하의 데이터를 저장할 수 있습니다. 이를 초과하면 Flash는 자동으로 사용자에게 더 많은 저장 공간을 요청합니다. Flash의 외부 인터페이스 인터페이스를 사용하면 Javascript를 통해 Flash의 로컬 저장소를 쉽게 작동할 수 있습니다. 플래시의 문제점은 단순히 플래시라는 것입니다.
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

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

로그인 후 복사

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

코드

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

로그인 후 복사

你也可以写成下面这样：

代码

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

로그인 후 복사

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

代码

localStorage.removeItem(
&#39;foo&#39;
);

로그인 후 복사

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

代码

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

로그인 후 복사

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

代码

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

로그인 후 복사

这时你应该会在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做的事情没什么两样：

代码

openDatabase(&#39;documents&#39;, &#39;1.0&#39;, &#39;Local document storage&#39;, 5*1024*1024,  
function (db) {  
    db.changeVersion(&#39;&#39;, &#39;1.0&#39;, function (t) {  
        t.executeSql(&#39;CREATE TABLE docids (id, name)&#39;);  
    }, 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中的所有变更都是基于“事务”的。
下面让我们来看一个小例子：

代码

var request = window.indexedDB.open("CandyDB",  
                                    "My candy store database");  
request.onsuccess = function(event) {  
  var db = event.result;  
  if (db.version != "1") {  
    // User&#39;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中文网。