Javascript的本地存储功能浅析

在日常的网站开发过程中，我们经常需要利用 JavaScript 在用户本地存储一些数据，以实现一些无法完全依靠服务器判断的功能。

比如：

判断用户是不是第二次访问网站。

这类需求都需要在客户端保存一些数据。

当时比较常见的方式主要有：

Cookie
IE 的 userData
localStorage

其中 userData 主要只有 IE 支持，所以可扩展性相对有限。下面主要看看 Cookie 和 localStorage。

Cookie 的一个明显优点是，当用户每次向服务器发起请求时，Cookie 中保存的数据也会随请求一起发送到服务器。

这样，服务器端的 PHP 等脚本语言就可以直接处理这些数据。

例如，PHP 可以通过：

$_COOKIE

获取客户端提交过来的 Cookie。

因此，如果网站需要让服务器端也能够获得客户端保存的数据，Cookie 是非常方便的一种方式。

但是 Cookie 的缺点也比较明显。

除了浏览器对 Cookie 数量和大小存在限制之外，我觉得还有一个问题比较明显：

使用 JavaScript 操作 Cookie 比较麻烦。

浏览器提供给 JavaScript 的主要就是：

document.cookie

这个对象。

设置、获取和删除 Cookie 都需要自己进行字符串处理。

相比之下，在 PHP 中：

setcookie()

可以直接设置 Cookie，而：

$_COOKIE

则可以直接获取。

为了方便使用，我自己简单封装了两个 JavaScript 函数。

function setcookie(name, value, expired, path, domain){
    var now=newDate();

    if(name==null){
        throw "Cookie Name Must not be Null";
    }else if(value==null){
        throw "Cookie Value Must not be Null";
    }else if(expired==null){
        expired=0;
    }

    if(path==null){
        path="/";
    }

    if(domain==null){
        domain=window.location.host;
    }

    now.setTime(now.getTime() +expired*1000);

    document.cookie =
        name+"="+escape(value) +
        ";expires="+now.toGMTString() +
        ";path="+path+
        ";domain="+domain;
}

setcookie() 的前三个参数是必须的，后面的参数分别用于设置有效期、路径和域名。

其中 expired 表示 Cookie 的有效时间，单位是秒。

如果需要删除一个 Cookie，可以直接把有效期设置为负值。

例如：

setcookie("test", "123", -1);

function getcookie(name){

    var allcookie=document.cookie;

    thiscookie=allcookie.match(name+"=[^\\s]*");

    mycookie=thiscookie[0].split("=");

    a=mycookie[1].substring(0, mycookie[1].length -1);

    return unescape(a);
}

getcookie() 用来获取指定 Cookie 的内容，传入的参数就是 Cookie 的 name。

例如：

getcookie("test");

就可以获取名为 test 的 Cookie。

从上面的代码可以看到，与 PHP 等服务器端语言相比，JavaScript 操作 Cookie 确实比较麻烦。

localStorage

相对于 Cookie，localStorage 的操作要方便很多。

它既可以像普通对象一样进行读写，也提供了对应的 API，可以进行设置、获取、删除和清空等操作。

比如，我需要保存：

host = www.hitoy.org

下面几种方式都可以：

localStorage.host ="www.hitoy.org";
localStorage["host"] ="www.hitoy.org";

localStorage.setItem(
    "host",
    "www.hitoy.org"
);

获取数据：

localStorage.host;
localStorage["host"];
localStorage.getItem("host");

删除数据：

localStorage.removeItem("host");

清空 localStorage：

localStorage.clear();

可以看到，localStorage 的操作非常灵活。

如果只是需要在用户浏览器本地保存一些数据，使用起来比 Cookie 简单很多。

localStorage 的缺点

当然，localStorage 也有一些问题。

第一，它保存的数据不会自动随着 HTTP 请求发送到服务器。

如果服务器端也需要这些数据，就必须通过其他方式主动发送，例如：

转换成 Cookie
通过 Ajax 发送到服务器

第二，localStorage 需要浏览器支持相应的 HTML5 特性。

在当时，一些比较老旧的浏览器仍然占据着比较大的市场，因此这也会影响 localStorage 的使用。

所以，在实际开发中，到底使用 Cookie 还是 localStorage，还是需要根据具体的功能需求来决定。

如果数据需要直接参与服务器端处理，Cookie 会更加方便；如果只是需要在客户端保存一些数据，那么 localStorage 使用起来会更加简单。

Cookie

设置 Cookie

获取 Cookie

localStorage

localStorage 的缺点