html5 存储篇(一)

时间:2023-03-09 00:16:23
html5 存储篇(一)
localStorage 和 sessionStorage
   localStorage 与 sessionStorage的相同点:
        (1)、都是用于客户端存储的技术,相对于传统的cookie更有一定的优势,他们相对于cookie 大约 4k 左右的储存量(并且每个网站的设置的cookie数量是有限的,并且各个浏览器的限制数目并不相同),储存量大约有 5M 吧。
        (2)、都以键值对的形式储存数据,具有相似的API。操作起来相似,且容易。
        clear( ) : 删除所有的值。
        getItem( name ) : 根据指定的名字name获取对应的值。
        key( index ) : 获得 index 位置处的值得名字。
        removeItem( name ) : 删除由 name 指定的名值对。
        setItme( name, value ) : 为指定的name设置一个对应的值。
    localStorage 与 sessionStorage的不同点:
        localStorage 一旦设置便会永久的保存在客户端浏览器上,除非手动的删除。
        sessionStorage在这方面如同服务端的session,即关闭浏览器,数据就会自动删除掉。因此在选择这两种储存时,应该考虑具体的应用场景来使用。
    具体使用:
        首先现已下面的代码检测一下您的浏览器是否支持 localStorage 对象。
            <script type="text/javascript">
                 if(typeof window.localStorage == 'undefined') {
                      alert('您的浏览器不支持localStorage!');
                 } else {
                      alert('OK');
                 }
            </script>
       下面我们来具体走一遍API吧,由于他们差不多这里我们将以localStorage为例来说明了。。
            //设置localStorage
            var localStorage = window.localStorage;
             localStorage.setItem("name","Lee");
             localStorage.setItem("age",27);    
         html5 存储篇(一)
         //删除localStorage
          var localStorage = window.localStorage;
          localStorage.removeItem("name");
          html5 存储篇(一)
        //获取localStorage中的值         
        var localStorage = window.localStorage;
         console.log(localStorage.getItem("age"));   
        html5 存储篇(一)
       //获取localStorage中的键值
        var localStorage = window.localStorage;
        console.log(localStorage.key(0));  //键值是以0开始的。       
       html5 存储篇(一)
    //删除localStorage中全部键值对。
        var localStorage = window.localStorage;
        localStorage.setItem("name","Lee");
        localStorage.clear();
       alert(localStorage.getItem("name"));  //null
 html5 存储篇(一)   html5 存储篇(一)