HTTP Cookie只能4KB？Web Storage靠谱多了

HTTP Cookie的局限性

以前我们都是靠 HTTP cookie存数据，虽然好用，但是只能放 4KB 的内容，还得每问必带，可能不太保险！另外没有 SSL 加持，你存储的数据可能一直暴露在外面，容易给人盯上。

userData的特点与缺陷

小伙伴们应该都听说过浏览器大战那段时期的事儿？当时大家用得最多的本地存储工具就是userData这个可是微软发明的！它利用DHTML里的behavior特性保存数据到电脑里。但是，这个东西问题不少，比如说，它不规范，也只能在IE上使用，所以对于那些要求跨浏览器兼容的软件来说，基本就没法用了。

Web Storage规范介绍

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

大家最近都热议的那个HTML5本地存储，其实就是WebStorage这玩意儿。这个方案得到了绝大部分浏览器,如 IE 8+, FF 3.5+, Safari 4+, Chrome 4+, Opera 10.5+的认可，几乎到处都能用得上。有了WebStorage，咱们开发者在客户端可以塞入不少数据，还能在不同网页之间来回传递使用！

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

Web Storage事件处理

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

想要所有网页都能看见同一数值并知道其是否变了？赶紧存个事件！这样不管哪里调整了数字，我们马上就能收到通知，直接处理就行！

localStorage.removeItem(
'foo'
);

HTML5 Storage的限制与挑战

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

虽然HTML5存储好用，可是默认的5MB量也挺让人烦的。一超标，“QUOTA_EXCEEDED_ERR”的警报就要响个没完没了。别指望用代码搞大这个空间，还是得靠你手动去调下浏览器里叫“QUOTA”的这玩意儿才行哟。

Web SQL Database规范概述

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';

除了我们常说的Web Storage，还有另一种有意思的技术叫做Web SQL Database。它虽然已经被淘汰了，但部分浏览器还是能用的！有这个，就能直接在网页上玩弄SQL，就跟在MySQL数据库里面一样操作。

IndexedDB规范介绍

最后再说下IndexedDB，这玩意儿至今好像也只有Firefox给弄好了。跟之前的不太一样，这里面有个叫object store的东东，挺像数据库里的表格和记录那样子。每个记录都可以塞很多信息进去，而且还能做交易处理和用游标来玩！

总结与展望

我们聊聊最近热门的HTML5本地存储，虽然都挺不错的，但也有各自的优缺点。做程序猿，怎么能忽视浏览器兼容性捏？选定好适合你的那一款存储方法，数据就能稳稳当当的了，用起来也更舒心。未来发展，谁又说得准？兴许还有更有趣的新东西。想跟上这股热潮，就得多学习新知识，多实践

这次咱们就先聊到这儿！别忘了时常来php中文网转转，兴许能发现点儿新鲜事儿~

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);  
});

。