html5本地存储之localStorage 和 sessionStorage

两者使用方法是一样的。

 只不过localStorage是存储在本地缓存(数据会一直存在，除非手动消除缓存)，

sessionStorage与服务器的session有关（数据在关闭浏览器后清除）。

localStorage和session的优点：

可以保存大数据在本地缓存，cookie只保存4KB的数据，而且在IE6只存入20条左右的数据

localStorage和session的缺点：

低版浏览器本无法使用

localStorage用法。

开始的时候要先判断浏览器是否兼容。

if( window.localStorage ){

     alert('您现在这个浏览器版本支持 localStorage');

}else{

     alert('您现在这个浏览器版本不支持 localStorage');

}

localStorage提供了几个API接口来使用

如

设置存储数据

localStorage.setItem( 'a', '数据' ); 或者 localStorage.a = '数据';

获取存储数据

localStorage.getItem('a'); 或者 localStorage.a

删除某个存储数据

localStorage.removeItem('a'); 或者 delete localStorage.a;

删除所有存储数据

localStorage.clear();

For Example（sessionStorage一样的使用方法）

 

localStorage

( function (window){

    var storage = null;

    if ( window.localStorage ){

        storage = window.localStorage ;

    } else {

        document . write( 'You browser does NOT support localStorage' ) ;

        return;

    }

    storage.setItem ( 'a1', 'a1' );

    storage. setItem ( 'a2' , 'a2') ;

    storage. setItem ('b1' , 'b1') ;

    storage. b2 = 'b2' ;

    var a1 = storage.getItem ( 'a1')

            , a2 = storage. getItem( 'a2' )

            , b1 = storage. getItem( 'b1' )

            , b2 = storage. b2;

    document . write( a1 + '----' + a2  + '----' +  b1  + '----' +  b2 + '<br />' );

    storage. removeItem ('a1' ) ;

    a1 = storage. getItem ('a1' ) ;

    a2 = storage. getItem ('a2' ) ;

    b1 = storage. getItem ('b1' ) ;

    b2 = storage. getItem ('b2' ) ;

    document . write( a1 + '----' + a2  + '----' +  b1  + '----' +  b2 + '<br />' );

    delete storage.a2;

    a1 = storage. getItem ('a1' ) ;

    a2 = storage. getItem ('a2' ) ;

    b1 = storage. getItem ('b1' ) ;

    b2 = storage. getItem ('b2' ) ;

    document . write( a1 + '----' + a2  + '----' +  b1  + '----' +  b2 + '<br />' );

    localStorage . clear() ;

    a1 = storage. getItem ('a1' ) ;

    a2 = storage. getItem ('a2' ) ;

    b1 = storage. getItem ('b1' ) ;

    b2 = storage. getItem ('b2' ) ;

    document . write( a1 + '----' + a2  + '----' +  b1  + '----' +  b2 + '<br />' );

})( this) ;