web storage

一、cookies的缺陷：

1、cookie会被附加在每个HTTP请求中，无形增加了流量。

2、由于在HTTP请求中的cookie是明文传递的，所以安全性问题。

3、cookie的大小限制在4KB左右，对于复杂的存储需求来说是不够用的。

二、开发者需求：

1、不受限的存储空间

2、数据保存在客户端

3、数据的生命周期可以跨越页面的刷新

4、本地数据不必每次都被重复的传回服务器而导致流量增加

三、web storage

是一种让网页可以把键值对存储在用户浏览器客户端的方法，想cookie一样，这些数据不会因为打开新的网站，刷新页面，关闭浏览器而消失。

数据不会每次随着HTTP请求被发送到服务器端。

1、检测浏览器是否支持：

function support_html5_storage(){

try{

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

}catch(e){

return false;

}

}

2、 使用web storage

HTML5存储是基于键值对的，键是String，数据可以是js基本数据类型，包括String，Boolean，int，float。

注意：数据在存储时实际上是一字符串保存的，因此在访问数据时需要利用parseInt() and parseFloat()来转换数据类型。

2.1、getItem and setItem

interface Storage{

getter any getItem(in DOMString key);

setter creator void setItem(int DOMString kye, int any data);

}

如果在调用setItem时使用一个已经存在的键，则value会被覆盖掉。如果调用getItem时传入一个不存在的key，则return null，no exception.

就像其他Js对象一样，可以将localStorage 对象当成是关联数据使用(associative map),除了使用getItem和setItem之外，还可以用括号的方式来引用数据。

var value = localStorage.getItem("key");

localStorage.setItem("key","value");

var value = localStorage["key"];

localStorage["key"] =value;

2.2 removeItem and clear

该接口还提供了方法来删除某个键和请假欧诺个整个存储区域

interface Storage{

deleter void removeItem(in DOMString key);

void clear();

}

localStorage.removeItem("key"); if this key not exist, not exception;