HTML5 本地存储 web Storage

#看在我写的这么辛苦的份上,你不关注下我么~如果本文中有写错的地方,请不吝赐教!
在以往,我们进行本地存储的时候是用document.cookie来存储的.
但是存储大小只有4k左右,解析也很复杂,效率得不到提高.
HTML5规范则提出了解决方案,定义了两个重要的API:Web Storage 和 Websql Datebase.
本文主要讲解Web Storage.

1.web Storage存储类型接口:

• sessionStorage

  - 生命周期为关闭浏览器
       - 在同一个窗口下可以共享数据

• localStorage

  - 永久生效,除非手动删除
       - 可以多窗口共享

  2.Web Storage特性

• 设置,读取方便
• 容量较大,sessionStorage约4M localStorage约20M

• 只能存储字符串,可以将对象JSON.Stringify()编码后存储

  3.方法详解
  setItem(key,value) 设置存储内容
  getItem(key) 读取存储内容
  removeItem(key)删除键值为key的存储内容
  clear() 清空所有存储内容
  key(n) 以索引值类获取存储内容
  4.示例
  结构代码:
  

<p>
    <label for="">
        键:<input type="text" class="key">
    </label>
    <label for="">
        值:<input type="text" class="val">
    </label>
    <input type="button" class="set" value="设置">
</p>

js代码:

//添加
    $('.set').on('click',function () {
    //获取父节点
        //获取key的值
        //获取val的值
        var parent =  $(this).parent();
        var key = parent.find('.key').val();
        var val = parent.find('.val').val();

        //设置一个键值对
        window.sessionStorage.setItem(key,val);
    });

实现效果
以往的方法获取存储值需要操作很多DOM,不利于性能优化,现在没有操作dom也可以,而且很方便

读取值结构代码:

<!-- 读取 -->
<p>
    <label for="">
        值: <output class='val'>&nbsp;</output>
    </label>
    <label for="">
        键:<input type="text" class="key">
    </label>
    <input type="button" class="get" value="读取">
</p>

js代码:

//读取
    $('.get').on('click',function () {
        //获取父节点
        var parent = $(this).parent();
        var key = parent.find('.key').val();

        //通过key获取值
       var val = window.sessionStorage.getItem(key);
        //将获取到的值放到页面上
        parent.find('.val').val(val);
    });

//
实现效果:

即使不停的刷新,值还是会保留,但是关闭浏览器值就会消失.
因此sessionStorage的生命周期为关闭浏览器.
而localStorage存储在本地,即使关闭浏览器,数据也会一直保留,一般是永久保存的.