HTML5 高级 sessionStorage 的运用例子
<!DOCTYPE html>
<html>
<head>
<title> ... </title>
<meta charset="utf-8"/>
<meta name="HSW" content="">
<meta name="Keywords" content="">
</head>
<body>
<input type="text" id="note"/><br/>
<input type="button" id="save" value="保存"/>
<input type="button" id="read" value="读取"/>
<input type="button" id="dele" value="删除"/><br/>
<textarea id="quyu" style="height:200px;"></textarea>
<script>
var save = document.getElementById("save");
save.onclick = function(){
var note = document.getElementById("note").value;
var key = new Date().getTime();
sessionStorage.setItem(key,note);
}
var read = document.getElementById("read");
var quyu = document.getElementById("quyu");
read.onclick = function(){
var len = sessionStorage.length;
for(var i=0;i<len;i++){
var key = sessionStorage.key(i);
quyu.innerHTML+=sessionStorage.getItem(key);
}
}
var dele = document.getElementById("dele");
dele.onclick = function(){
var len = sessionStorage.length;
//var note = ;
for(var i=len-1;i>=0;i--){
var key = sessionStorage.key(i);
sessionStorage.removeItem(key);
quyu.innerHTML = "";
note.value = "";
}
document.getElementById("note").value = "";
}
</script>
</body>
</html>
总结如下：
* Web存储API
* 基本内容* 数据仓库 - 用于存储数据
* HTML5存储系统
* localStorage(本地存储) - 替代Cookie
* sessionStorage(会话存储) - 替代Session(类似于内存)
* sessionStorage
* setItem(key,value)方法
* 作用 - 设置数据(新增|修改数据)
* 新增数据 - key值是新的
* 修改数据 - key值是存在的
* 参数
* key - 作为存储数据的标识(唯一,不可重复)
* value - 存储的数据内容(number|string)
* getItem(key)方法
* 作用 - 获取数据(读取数据)
* 参数
* key - 根据key获取对应的数据内容
* 返回值 - key对应的value值
* key(index)方法
* 作用 - 根据索引值返回对应key
* 参数
* index - 索引值
* 返回值 - 返回key值
* removeItem(key)方法
* 作用 - 删除数据
* 参数
* key - 根据key删除指定数据内容
* clear()方法
* 作用 - 将存储系统的所有数据删除(清空)
* length属性
* 作用 - 返回当前存储系统的数据个数
* localStorage
* 提供的属性和方法与sessionStorage一致