H5的本地存储技术及其与Cookie的比较

时间:2024-01-01 16:11:39

第一部分: H5的本地存储技术

HTML5 提供了两种在客户端存储数据的新方法。
先看下面的例子:

例1:
var mySelection = {name:"car", amount:2};
localStorage.mySelection = JSON.stringify(mySelection);
console.log(localStorage.mySelection);

var mySelection2 = JSON.parse(localStorage.mySelection);
console.log(mySelection2.name);
console.log(mySelection2.amount);

例2:(把上述代码中的localStorage替换成 sessionStorage)

例1是把本网站的资料mySelection存储到本地,这样本网站的各个页面都可以使用此数据。而且,任何时候打开本网站都还可以继续使用它。

例2和例1的唯一区别是,用sessionStorage,在关闭本网站各页面之后,数据失效,下次再打开时候, 这些数据都不可用。

说明:HTML5 提供了两种在客户端存储数据的新方法:
localStorage - 可以无限期保持
sessionStorage - 只在本session中有效, 关闭页面之后,就无效了
(除了有效期不同之外, 二者的其余方面都相同, 所以,为了简单起见,下面把二者统称"localStorage");

与之前的 cookie 技术相比:
* 这两张存储的可用空间更大 (5M, 每个网站)
* 不必上传给服务器, 节省带宽
* 同源的各个页面都可以存取
* 比cookie的存取方法更直接,

限制:
* localStorage只能存储成字符串形式, 不能直接保存数字和布尔变量。
所以, 其它类别一般都转成JSON格式存储

第二部分 Cookie
cookie是存储于用户计算机中的变量。每当用户从同一台计算机同一个浏览器请求某个页面的时候,就会发送该页面的所有cookie给服务器。

例子:一个完整的cookie
document.cookie = "username=John; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

上面的代码存储了这样一个cookie:
变量名称username, 取值"John",
失效日期时间: 18 Dec 2013 12:00:00 UTC
页面路径: "/"

从上面可以看出, cookie的形式比较复杂,JQuery有一个
名为“JQuery Cookie"的插件,使用方法如下:
$.cookie('name', 'John', { expires: 7, path: '/' }); //指定7天以后失效
console.log($.cookie('name'));