9.06

Web Storage

一、作用
使浏览器在客户端运行时，可以存储部分程序数据。

二、种类（两种）

1、Session Storage
含义；基于Session的Web Storage。

保存数据期限与Session的期限相同
Session期限=endTime-startTime
startTime;第一次访问某网站的时刻
endTime;用户关闭浏览器（或离开该网站）的时刻

2、Local Session
含义；数据保存在用户的磁盘的Web Storage。

保存期限较长，除非用户（或程序显示地）清除这些数据。

3、Session Storage与Local Session区别
二者的功能和用法基本相同，只是存储期限不同。

三、Storage接口的用法
storage.length: 返回Storage里保存了多少组key-value对
storage.key(index); 返回第index个key。
storage.getItem(key); key对应的value。
storage.set(key,value); 存入指定key-value对
storage.removeItem(key); 删除key指定的key-value对
storage.clear(); 删除所有key-value对

四、存储与读取数据

使用Local Storage保存：

<script type="text/javascript">

//——————————–存储事件————————–
function saveStorage(id){
//判断是否勾选了复选框，结果存储在checked中。
var checked = document.getElementById(“local”).checked;
// 使用何种方式读取数据，结果存储在storage中。
var storage = checked ? localStorage : sessionStorage;
// 获取id名为input的数据，结果存储在target中。
var target = document.getElementById(id);
// 保存数据，保存在key名为message的key-value对中。
storage.setItem(“message” , target.value);
}
//——————————–读取事件————————–
function loadStorage(id){
//判断是否勾选了复选框，结果存储在checked中。
var checked = document.getElementById(“local”).checked;
// 使用何种方式读取数据，结果存储在storage中。
var storage = checked ? localStorage : sessionStorage;
// 获取id为show的节点。并存储在节点名为target中。
var target = document.getElementById(id);
// 输出数据，把key名为message的value值输出。
target.innerHTML = storage.getItem(“message”);
}

1

定时、延时事件

一、定时事件
window.setInterval(fuction(){
功能语句（当前事件）;
},间隔时间)1

二、延时事件
注意；延时事件只执行一次
window.setTimeout(fuction(){
功能语句（只执行一次当前事件）;
},延时时间)1

三、间断定时事件
//创建一个变量，来接收定时事件。
var ds=window.setInterval(fuction(){功能语句（当前事件）;},间隔时间)
//延时间断定时事件。
window.setTimeout(function(){window.clearInterval(ds)},间隔时间)1

四、轮播图
1、隐藏法样式
.show{
display:block;
}
.hidden{
display:none;
}1

2、使用document.getElementsByClassName(“类名”)
var imgs=document.getElementsByClassName(“photo”);1

3、定时事件
var lbt=window.setInterval(functin(){},间隔事件);1

4、改变属性
img[j].setAtttibute(“class”,”photo show”)1

5、清除定时事件
window.clearInterval(lbt);1