HTML5+CSS3  Web Storage方法
而localStorage和sessionStorage都具有相同的操作方法，如setItem、getItem和removeItem等。
1．setItem存储value
该方式将value存储到key字段。
语法：
.setItem( key, value)
例如，用户可以通过下命令进行操作。
Window.sessionStorage.setItem("user", "张军");
Window.localStorage.setItem("site", "www.lanfeng");
下面通过示例，来了解一下如何添加key字段，以及赋值。
示例：8-3  setItem.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>setItem存储value</title>
<script language="javascript">
function ergodic(){
    var ls=window.localStorage;
    ls.setItem("site", "www.lanfeng");
    ls.setItem("user", "张军");
    ls.setItem("sex", "男");
    alert("添加成功");
    alert( ls.getItem("user"));
}
</script>
</head>
<body onLoad="ergodic()">
</body>
</html>
执行上述代码，用户可以了解到在浏览器中，添加key值的方法。
2．getItem获取value
该方法获用于取出指定key本地存储的值。语法：
.getItem(key)
例如，用户在JavaScript代码中，可以通过下列命令进行操作。
var value = Item("user");
var site = Item("site");
3．removeItemsessionstorage和localstorage删除key
该方法用于删除指定key的本地存储值。
语法：
.removeItem(key)
例如，用户可以通过以下命令进行操作。
veItem("user");
veItem("site");
4．clear清除所有的key/value
该方法主要用来清除所有的key/value（名/值）内容。
语法：
.clear()
例如，用户可以直接使用下列命令清除所有名和值内容。
Window.sessionStorage.clear();
Window.localStorage.clear();
5．key( )方法和length属性
在HTML5还提供了一个key( )方法，可以在不知道有哪些键值的时候使用。而storage.length可以获取storage中key和value的数量。
示例：8-4  key.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>遍历localStorage中内容</title>
<script language="javascript">
function ergodic(){
    var storage = window.localStorage;
    for (var i=0, len = storage.length; i  <  len; i++){
        var key = storage.key(i);
        var value = Item(key);
        var kk =key + "=" + value+"  "+kk;
    }
    ElementById("key").innerHTML =kk;
}
</script>
</head>
<body onLoad="ergodic()">
<div id="key"></div>
</body>
</html>
通过执行上述代码，可以在网页中，显示出localStorage中所包含的内容。
提示：
“ElementById(“key”)语句，是根据指定id属性值为key的标记对象。假如对应的为一组对象，则返回该组对象中的第一个。如果无符合条件的对象，则返回null。
innerHTML方法就可以向这个key位置写入内容。
6．点和中括号（“[ ]”）操作
Web Storage不但可以用自身的setItem、getItem等方便存取，也可以像普通对象一样，通过用点（“.”）操作符和中括号（“[ ]”）的方式进行数据存储。
示例：8-5  dian.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>点和中括号操作符</title>
<script language="javascript">
function ergodic(){
    var storage = window.localStorage;
    storage.key1 = "hello";
    storage["key2"] = "world";
    ElementById("key").innerHTML =storage.key1;
    ElementById("key2").innerHTML =storage["key2"];
}
</script>
</head>
<body onLoad="ergodic()">
<div id="key"></div>
<div id="key2"></div>
</body>
</html>
通过执行上述代码，可以看到在网页中将显示所hello和world内容。整个过程，是先通过操作符添加到key名中，再通过操作符显示到标记中。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。