Local Storage与Cookies对比

使用localStorage，Web应用程序可以在用户的​​浏览器中本地存储数据。

在HTML5之前，应用程序数据必须存储在Cookie中，包含在每个服务器请求中。

比起cookies来讲localStorage更安全，大量数据可以在本地存储，而不影响网站性能。虽然localStorage更现代化，但这两种技术都有一些利弊。

Cookies

优点

支持继承
持久数据
过期时间

缺点

每个域都将所有的Cookie存储在一个字符串中，这样可以使解析数据变得困难
数据未加密，这成为一个问题，因为…虽然体积小，但每个HTTP请求发送Cookie有限大小（4KB）
可以从cookie执行SQL注入，存在安全风险。

Local Storage

优点

大多数现代浏览器的支持
直接存储在浏览器中的持久性数据
同源规则适用于本地存储数据
不发送每个HTTP请求
每个域5MB的存储空间（即5120KB）

缺点

不兼容以前的浏览器：IE 8，Firefox 3.5，Safari 4，Chrome 4，Opera 10.5，iOS 2.0，Android 2.0
如果服务器需要存储的客户端信息，您必须先发送它。
localStorage的使用几乎与Session一样，所以localStorage使用可以非常快速的上手。但是，如果存储的数据对您的应用程序来说至关重要，则如果localStorage不可用，则可能会使用Cookie作为备份。如果要查看本地存储的浏览器支持，只需运行这个简单的脚本即可：

/* 
* function body that test if storage is available
* returns true if localStorage is available and false if it's not
*/
function lsTest(){
    var test = 'test';
    try {
        localStorage.setItem(test, test);
        localStorage.removeItem(test);
        return true;
    } catch(e) {
        return false;
    }
}

/* 
* execute Test and run our custom script 
*/
if(lsTest()) {
    // window.sessionStorage.setItem(name, 1); // session and storage methods are very similar
    window.localStorage.setItem(name, 1);
    console.log('localStorage where used'); // log
} else {
    document.cookie="name=1; expires=Mon, 28 Mar 2016 12:00:00 UTC";
    console.log('Cookie where used'); // log
}