H5_Node3_本地存储&新的JS-API

来源：互联网发布：淘宝最低价插件编辑：程序博客网时间：2024/05/18 01:18

-->本地存储历史
-->HTML5本地存储
localStorage
sessionStorage
-->新的JS-API
新的选择器
classList对象

一、本地存储发展情况

cookie：
只能存储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不存在则返回nullcon.innerHTML=lcs.getItem('sex');//womancon.innerHTML=lcs.getItem('name');//大喽/* key(index);  获取指定下标位置的key*//*alert(lcs.key(0));//agealert(lcs.key(1));//namealert(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__);//storageconsole.log(window.localStorage.__proto__===Storage.prototype);//trueconsole.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);//不是元素集合,没有lengthliblue.style.background='blue';var liblues=document.querySelectorAll('.blue');//选择器返回所有匹配到的元素，如未匹配到返回空数组// alert(liblues.length);//3liblues[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>

0 0