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