H5_Node3_本地存储&新的JS-API
-->本地存储历史
-->HTML5本地存储
localStorage
sessionStorage
-->新的JS-API
新的选择器
classList对象
只能存储4KB
每次操作会随着HTTP请求发送给服务器
操作数据很繁琐，没有方便的API
有可能被用户禁用
Flash：
需要安装Flash插件
移动端无法普及
二、HTML5 本地存储
1、HTML5 本地存储的优点：
最小5MB，可以申请更大的空间
不会随HTTP请求发送给服务器
有方便的API操作
移动端普及高
有localStorage与sessionStorage两种
2、支持性
![]()
按域名进行存储，不会和其他域名冲突
键值对存储：key/value
1、setItem(key , value)，保存或设置数据
如果key已经存在，则覆盖key对应的value
如果key不存在则返回null
3、length 获取localStorage一共有多少条数据
alert(window.localStorage.length);
配合key(index)方法可以实现遍历localStorage数据的方法
4、clear(); 将同域名下的所有localStorage数据都清空
removeItem('key'):
sessionStorage不能跨页面访问，它只局限在当前的标签页
五、storage事件：
1、当同源的localStorage有更改以后，其他窗口会触发这个事件。
![]()
2、storage和json
目前javascript使用非常多的json格式
如果希望存储在本地，可以直接调用 JSON.stringify() 将json对象转为json字符串
读取出来后调用 JSON.parse() 将json字符串转为json对象格式
如下所示：
var storage=window.localStorage;
var json={"name1":"jack","name2":"lily"};
storage.setItem("name",JSON.stringify(json));
json = JSON.parse(storage.getItem("name"));
1、document.querySelector("selector");
选择器返回第一个匹配到的元素，如未匹配到返回null
2、document.querySelectorAll("selector");
选择器返回所有匹配到的元素，如未匹配到返回空数组
3、document.getElementsByClassName("name");
选择器返回所有匹配到的元素，如未匹配到返回空数组
支持： Chrome, FireFox, Safari, Opera, IE 8+
4、classList对象
在HTML5 API里，页面DOM里的每个节点上都有一个classList对象，程序员可以使用里面的方法新增、删除、修改及判断节点上的CSS类。
classList对象里有些很有用的方法：
length: 类名个数 item(index): 获取类名
add(): 添加类 remove(): 删除类
contains(): 判断类 toggle(): 反转类
-->HTML5本地存储
localStorage
sessionStorage
-->新的JS-API
新的选择器
classList对象
一、本地存储发展情况
只能存储4KB
每次操作会随着HTTP请求发送给服务器
操作数据很繁琐，没有方便的API
有可能被用户禁用
Flash：
需要安装Flash插件
移动端无法普及
二、HTML5 本地存储
1、HTML5 本地存储的优点：
最小5MB，可以申请更大的空间
不会随HTTP请求发送给服务器
有方便的API操作
移动端普及高
有localStorage与sessionStorage两种
2、支持性
支持性检测
三、localStorage
localStorage为永久性保存数据，不会随着浏览器的关闭而消失，可以在同域名跨页访问。按域名进行存储，不会和其他域名冲突
键值对存储：key/value
1、setItem(key , value)，保存或设置数据
如果key已经存在，则覆盖key对应的value
如果不存在则添加key与value
2、getItem(key); 获取key对应的value。如果key不存在则返回null
3、length 获取localStorage一共有多少条数据
alert(window.localStorage.length);
配合key(index)方法可以实现遍历localStorage数据的方法
4、clear(); 将同域名下的所有localStorage数据都清空
removeItem('key'):
删除数据，通过key来删除相应的value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>localStorage</title>
<style>
*{margin:0;padding:0;}
</style>
</head>
<body>
<button id="btn">删除</button>
<h1 id="con"></h1>
<h1 id="con2"></h1>
<script>
//判断支持情况
if (window.localStorage) {
var lcs=window.localStorage;
/*setItem(key , value)，保存或设置数据*/
lcs.setItem('name','小喽');
lcs.setItem('age','18');
lcs.setItem('sex','woman');
// key相同会覆盖上面设置的值
lcs.setItem('name','大喽');
/*getItem(key); 获取key对应的value。*/
// 如果key不存在则返回null
con.innerHTML=lcs.getItem('sex');//woman
con.innerHTML=lcs.getItem('name');//大喽
/* key(index); 获取指定下标位置的key*/
/*alert(lcs.key(0));//age
alert(lcs.key(1));//name
alert(lcs.key(2));//sex*/
/*length -获取localStorage一共有多少条数据*/
// alert(lcs.length);//3
// 配合key(index)方法可以实现遍历localStorage数据的方法
for (var i = 0; i < lcs.length; i++) {
con2.innerHTML+=lcs.getItem(lcs.key(i))+' ';
}
var btn=document.getElementById('btn');
btn.onclick=function(){
// clear(); 将同域名下的所有localStorage数据都清空
lcs.clear();
// removeItem('key'):删除数据，通过key来删除相应的value
// lcs.removeItem('name');
}
}
console.log(window.localStorage.constructor);//function Storage()
console.log(window.localStorage.__proto__);//storage
console.log(window.localStorage.__proto__===Storage.prototype);//true
console.log(window.localStorage.__proto__.__proto__);//object
</script>
</body>
</html>
四、sessionStorage
sessionStorage为临时性保存数据，当页面关闭就会消失。其他操作与localStorage一样sessionStorage不能跨页面访问，它只局限在当前的标签页
五、storage事件：
1、当同源的localStorage有更改以后，其他窗口会触发这个事件。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style>
*{margin:0; padding:0; list-style:none;}
</style>
</head>
<body>
<input type="text" id="ipt" value="">
<button id="btn">设置</button>
<h1 id="txt"></h1>
<script>
var ipt=document.getElementById('ipt');
var btn=document.getElementById('btn');
var txt=document.getElementById('txt');
btn.onclick=function (){
window.localStorage.setItem('keyname',ipt.value);
}
/*storage事件：当同源的localStorage有更改以后，其他窗口会触发这个事件。*/
//e.key-->被增加、修改、删除的数据的key
//e.oldValue-->数据被修改之前的value，如果数据是被增加的则是null
//e.newValue-->数据被修改之后的value
//e.url-->修改storage页面的url;
window.addEventListener('storage',function (e){//服务器环境运行
txt.innerHTML='发生变化的key是：'+e.key+'，旧的值是：'+e.oldValue+'，新的值是：'+e.newValue+'，修改数据的页面地址是：'+e.url;
},false);
</script>
</body>
</html>
2、storage和json
目前javascript使用非常多的json格式
如果希望存储在本地，可以直接调用 JSON.stringify() 将json对象转为json字符串
读取出来后调用 JSON.parse() 将json字符串转为json对象格式
如下所示：
var storage=window.localStorage;
var json={"name1":"jack","name2":"lily"};
storage.setItem("name",JSON.stringify(json));
json = JSON.parse(storage.getItem("name"));
六、JS新API
新的选择器1、document.querySelector("selector");
选择器返回第一个匹配到的元素，如未匹配到返回null
2、document.querySelectorAll("selector");
选择器返回所有匹配到的元素，如未匹配到返回空数组
3、document.getElementsByClassName("name");
选择器返回所有匹配到的元素，如未匹配到返回空数组
支持： Chrome, FireFox, Safari, Opera, IE 8+
4、classList对象
在HTML5 API里，页面DOM里的每个节点上都有一个classList对象，程序员可以使用里面的方法新增、删除、修改及判断节点上的CSS类。
classList对象里有些很有用的方法：
length: 类名个数 item(index): 获取类名
add(): 添加类 remove(): 删除类
contains(): 判断类 toggle(): 反转类
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style>
*{margin:0; padding:0; list-style:none;}
</style>
</head>
<body>
<ul id="list">
<li class="red green yellow">11</li>
<li class="blue">22</li>
<li class="red" id="li3">33</li>
<li class="blue">44</li>
<li class="red blue">55</li>
</ul>
<button id="btn">设置</button>
<script>
var list=document.getElementById('list');
var lis=list.getElementsByTagName('li');
var lis=list.children;
var lireds=document.getElementsByClassName('red');//ie 6 7 8不支持
console.log(lireds[1]);
lireds[1].style.background='red';
var liblue=document.querySelector('.blue');//选择器返回第一个匹配到的元素，如未匹配到返回null
// alert(liblue.length);//不是元素集合,没有length
liblue.style.background='blue';
var liblues=document.querySelectorAll('.blue');//选择器返回所有匹配到的元素，如未匹配到返回空数组
// alert(liblues.length);//3
liblues[1].style.background='green';
/*classList对象*/
// console.log(liblue.classList);
/*1-length: 类名个数*/
// console.log(lis[0].classList.length);// 3
/*2-item(index): 获取类名*/
console.log(lis[0].classList.item(1));//返回这个元素的第二个类名
btn.onclick=function (){
/*3-add(): 添加类*/
lis[0].classList.add('blue');
// lis[0].className='red green yellow blue';
/*4-remove(): 删除类*/
// lis[0].classList.remove('yellow');
/*5-contains(): 判断类*/
// if (lis[0].classList.contains('blue')) {
/*6-toggle(): 反转类*/
if (lis[0].classList.toggle('blue')) {
alert('有blue这个类');
}else{
alert('没有blue这个类');
};
// lis[0].classList.toggle('blue');//反转类
}
</script>
</body>
</html>