HTML5 本地存储、新的JS-API

1、HTML5本地存储

• 大小最小5MB，可以申请更大的空间
• 不会随HTTP请求发送给服务器
• 非常容易操作

• 移动端普及高
  localStorage与sessionStorage两种

• 1、localStorage
  （1）localStorage为永久性保存数据，不会随着浏览器的关闭而消失，可以在同域名跨页访问。
  （2）按域名进行存储，不会和其他域名冲突
  （3）键值对存储：key/value

  （4）支持性检测：    if（window.localStorage）{        //支持本地存储    }（5）localStorage  API    1、设置值：        setItem(key , value)，保存或设置数据        如果key已经存在，则覆盖key对应的value、如果不存在则添加key与value        示例：localStorage.setItem('name','陈冠希');    2、获取值：        getItem(key);   获取key对应的value。        如果key不存在则返回null        示例：alert(localStorage.getItem('name')); //小明        示例：alert(localStorage.getItem('abc'));      //null    3、获取key值：        key(index);  获取指定下标位置的key        示例:alert(window.localStorage.key(0)); //data    4、获取length        length 获取localStorage一共有多少条数据        配合key(index)方法可以实现遍历localStorage数据的方法        示例：alert(window.localStorage.length);    5、清空、删除数据        clear(); 将同域名下的所有localStorage数据都清空        removeItem('key'):    删除数据，通过key来删除相应的value    6、storage事件：当同源的localStorage或sessionStorage有更改以后，会触发这个事件。        （1） Property   Description        （2）key  被增加、修改，删除的数据key        （3）oldValue     数据被修改之前的value、如果数据是被增加的则为null        （4）newValue     数据被修改之后的value        （5）url  修改storage页面的url

• 2、sessionStorage
  sessionStorage为临时性保存数据，当页面关闭就会消失。其他一切与localStorage一样
  sessionStorage不能跨页面访问，也不会触发跨标签页的storage事件。它只局限在当前的标签页

  3、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”));

• 2、H5-JS-API
  （1）新的选择器
  1、document.querySelector(“selector”);
  选择器返回第一个匹配到的元素，如未匹配到返回null
  2、document.querySelectorAll(“selector”);
  选择器返回所有匹配到的元素数组，如未匹配到返回空数组
  3、document.getElementsByClassName(“selector”);
  选择器返回所有匹配到的元素数组，如未匹配到返回空数组
  支持： Chrome, FireFox, Safari, Opera, IE 8+

  （2）classList对象
  在HTML5 API里，页面DOM里的每个节点上都有一个classList对象，程序员可以使用里面的方法新增、删除、修改及判断节点上的CSS类。
  classList对象里有很多有用的方法：
  length: 类名个数 item: 获取类名
  add: 添加类 remove: 删除类
  contains: 判断类 toggle: 反转类