sessionStorage
sessionStorage像是cookie的替代,可以在特定的时间段内保持数据可用,但是只能单窗口引用,且窗口关闭后将不能使用
sessionStorage语法:
setItem(key,value)—用键值对创建项,如果键值已经存在,则更新值。
例:sessionStorage.setItem("uname","zhangsan");
getItem(key)—根据指定的键值获取对应的值。
例:sessionStorage.getItem("uname");
属性:
length—返回存储空间中积累的项的数量
方法:
key(index)—获取指定索引位置对应的项的键值
例:
var len=sessionStorage.length;
for(var i=0;i<len;i++){
var key=sessionStorage.key(i);
alert(sessionStorage.getItem(key));
}
removeItem(key)—根据项的键值删除指定的项
clear()—清空存储空间,删除所有的项
localStorage
localStorage是将数据存储在本地,可以永久存储,由用户决定是否保留。
localStorage与sessionStorage有相同的接口,所以sessionStorage所有的方法和属性对localStorage都有效。
案例:实现Web留言本功能
<!DOCTYPE html>
<html>
<head>
<title>Web版本的简单记事本</title>
<meta charset="utf-8"/>
</head>
<body>
<!--
HTML页面提供的功能
* 提供文本框 - 用于用户输入信息/读取存储的信息
* 按钮
* 保存 - 将用户输入的信息,保存在sessionStorage中
* 读取 - 从sessionStorage读取所有数据,以表格形式(table)显示
* 修改 - 选中表格中某条数据,进行修改
* 删除 - 选中表格中某条数据,进行删除
* 清空 - sessionStorage中所有数据删除
*
-->
<h1>Web版本的简单记事本</h1>
<textarea rows="10" cols="50" id="mytext"></textarea>
<br>
<input type="button" id="save" value="保存">
<input type="button" id="load" value="读取">
<input type="button" id="update" value="修改">
<input type="button" id="remove" value="删除">
<input type="button" id="clear" value="清空">
<br><br>
<div id="show"></div>
<script>
var radioid;
// 1. 保存功能
var save = document.getElementById("save");
save.onclick = function(){
var mytext = document.getElementById("mytext").value;
if(mytext != ""){
var mykey;
if(!radioid){
// 新增
mykey = new Date().getTime();
}else{
// 修改
mykey = radioid;
}
sessionStorage.setItem(mykey,mytext);
// 清空文本框内容
}else{
alert("请输入内容后再保存!");
}
}
// 2. 读取所有数据
var load = document.getElementById("load");
load.onclick = myLoad;
function myLoad(){
var mytable = "<table border='1'><tr><td></td><td align='center'><b>key值</b></td><td align='center'><b>value值</b></td></tr>";
for(var i=0;i<sessionStorage.length;i++){
// a. 调用key(index)方法,根据索引值返回key
var mykey = sessionStorage.key(i);
// b. 调用getItem(key)方法,根据key返回value
var myvalue = sessionStorage.getItem(mykey);
// 构建表格
mytable = mytable + "<tr><td><input type='radio' id='"+mykey+"' name='myradio'></td><td>"+mykey+"</td><td>"+myvalue+"</td></tr>";
}
mytable = mytable + "</table>";
var show = document.getElementById("show");
show.innerHTML = mytable;
}
// 3. 修改功能
var update = document.getElementById("update");
update.onclick = function(){
// a. 获取所有单选框
var radios = document.getElementsByName("myradio");
// b. 遍历所有单选框
for(var i=0;i<radios.length;i++){
if(radios[i].checked){
radioid = radios[i].getAttribute("id");
break;
}
}
var myvalue = sessionStorage.getItem(radioid);
var mytext = document.getElementById("mytext");
mytext.value = myvalue;
}
// 4. 删除
var remove = document.getElementById("remove");
remove.onclick = function(){
// a. 获取所有单选框
var radios = document.getElementsByName("myradio");
// b. 遍历所有单选框
for(var i=0;i<radios.length;i++){
if(radios[i].checked){
radioid = radios[i].getAttribute("id");
break;
}
}
// 删除
sessionStorage.removeItem(radioid);
myLoad();
}
// 5. 清空
var clear = document.getElementById("clear");
clear.onclick = function(){
sessionStorage.clear();
}
</script>
</body>
</html>
<html>
<head>
<title>Web版本的简单记事本</title>
<meta charset="utf-8"/>
</head>
<body>
<!--
HTML页面提供的功能
* 提供文本框 - 用于用户输入信息/读取存储的信息
* 按钮
* 保存 - 将用户输入的信息,保存在sessionStorage中
* 读取 - 从sessionStorage读取所有数据,以表格形式(table)显示
* 修改 - 选中表格中某条数据,进行修改
* 删除 - 选中表格中某条数据,进行删除
* 清空 - sessionStorage中所有数据删除
*
-->
<h1>Web版本的简单记事本</h1>
<textarea rows="10" cols="50" id="mytext"></textarea>
<br>
<input type="button" id="save" value="保存">
<input type="button" id="load" value="读取">
<input type="button" id="update" value="修改">
<input type="button" id="remove" value="删除">
<input type="button" id="clear" value="清空">
<br><br>
<div id="show"></div>
<script>
var radioid;
// 1. 保存功能
var save = document.getElementById("save");
save.onclick = function(){
var mytext = document.getElementById("mytext").value;
if(mytext != ""){
var mykey;
if(!radioid){
// 新增
mykey = new Date().getTime();
}else{
// 修改
mykey = radioid;
}
sessionStorage.setItem(mykey,mytext);
// 清空文本框内容
}else{
alert("请输入内容后再保存!");
}
}
// 2. 读取所有数据
var load = document.getElementById("load");
load.onclick = myLoad;
function myLoad(){
var mytable = "<table border='1'><tr><td></td><td align='center'><b>key值</b></td><td align='center'><b>value值</b></td></tr>";
for(var i=0;i<sessionStorage.length;i++){
// a. 调用key(index)方法,根据索引值返回key
var mykey = sessionStorage.key(i);
// b. 调用getItem(key)方法,根据key返回value
var myvalue = sessionStorage.getItem(mykey);
// 构建表格
mytable = mytable + "<tr><td><input type='radio' id='"+mykey+"' name='myradio'></td><td>"+mykey+"</td><td>"+myvalue+"</td></tr>";
}
mytable = mytable + "</table>";
var show = document.getElementById("show");
show.innerHTML = mytable;
}
// 3. 修改功能
var update = document.getElementById("update");
update.onclick = function(){
// a. 获取所有单选框
var radios = document.getElementsByName("myradio");
// b. 遍历所有单选框
for(var i=0;i<radios.length;i++){
if(radios[i].checked){
radioid = radios[i].getAttribute("id");
break;
}
}
var myvalue = sessionStorage.getItem(radioid);
var mytext = document.getElementById("mytext");
mytext.value = myvalue;
}
// 4. 删除
var remove = document.getElementById("remove");
remove.onclick = function(){
// a. 获取所有单选框
var radios = document.getElementsByName("myradio");
// b. 遍历所有单选框
for(var i=0;i<radios.length;i++){
if(radios[i].checked){
radioid = radios[i].getAttribute("id");
break;
}
}
// 删除
sessionStorage.removeItem(radioid);
myLoad();
}
// 5. 清空
var clear = document.getElementById("clear");
clear.onclick = function(){
sessionStorage.clear();
}
</script>
</body>
</html>