html5 web storage和cookie的区别?

1、存储大小不同

webStorage存储大小有限制，可达5M或更大；cookie存储数据不能超过4K

2、数据有效期不同

webStorage始终有效，窗口或浏览器关闭也一直保存；cookie只有设置的cookie过期时间之前一直有效

3、事件通知机制

webStorage支持事件通知机制，而cookie则不支持

4、API接口

webStorage自带一些API接口，可以调用，而cookie没有

基本使用方法如下：localStorage.name = "k1w1"这样的话，你的本地磁盘中就会有个数据库存下了这个数据。我无法接受数据写到了我的本地磁盘而我找不到它的确切位置，于是通过寻找发现：Chrome 的存储方式是以sqlite的数据库文件形式存储。存在C:\Users\Username\AppData\Local\Google\Chrome\User Data\Default\Local Storage 中，虽然后缀名是.localstorege 但是实际上就是sqlite的数据库文件，可以用sqlite打开，并看到其中的数据。这么蛋疼的找它存在哪里是因为我想删掉在学习使用local storage时产生的一些垃圾数据，有点电脑洁癖。就像当初我喜欢选择性删除cookies一样。Firefox存在哪里暂时没有找到，感觉像是被加了密的sqlite数据库文件（这样的话firefox的安全性就高一些了），不过我每次关掉firefox它都会自动删掉所有浏览数据，所以也暂时不想找它存在哪了。

可以使用 JavaScript 来访问 HTML5 Storage，通过全局的 window 对象的 localStorage 对象。在我们使用之前，我们需要首先检测是否可用：

function supports_html5_storage() {

try {

return 'localStorage' in window &&window['localStorage'] !== null

} catch (e) {

return false

}

}

HTML5 Storage 基于键值对存储。你要存储的数据需要有一个名字作为键，然后你就可以使用这个键读取这个数据。这个键是一个字符串；数据则可以是 JavaScript 支持的任何数据类型，包括字符串、布尔值、整数和浮点数。但是，我们通常将数据作为字符串进行存储。如果你存储读取非字符串数据，你就得使用类似 parseInt() 或者 parseFloat() 这样的函数，将读取的数字转换成所需要的 JavaScript 数据类型。

var foo = localStorage.getItem("bar")

// ...

localStorage.setItem("bar", foo)

也可以写成：

var foo = localStorage["bar"]

// ...

localStorage["bar"] = foo

---