HTML5本地存储应用sessionStorage和localStorage

html5流行之后，可以通过localStorage和sessionStorage实现浏览器端的数据存储，这两者有什么特点呢？

sessionStorage
　　sessionStorage属于临时会话，数据存储的有效期为：从页面打开到页面关闭的时间段,属于窗口的临时存储，页面关闭，本地存储消失

localStorage

sessionStorage的应用:

!DOCTYPE html>
    html>
    head>
        meta charset="UTF-8">
        tITle>
    /title>
        script>
        window.onload = function(){
                VAR ainput = document.getelementsbytagname('input');
            aInput[0].onclick = function(){
                    //sessionStorage: 临时存储, 只在当前页面有效,不能传递到其他页面,页面关闭之后消失                window.sessionStorage.setItem("name", aInput[3].value );
            }
    ;
            aInput[1].onclick = function(){
                    alert(window.sessionStorage.getItem("name" ));
            }
    ;
            aInput[2].onclick = function(){
                    window.sessionStorage.removeitem("name" );
            }
    ;
        }
        /script>
    /head>
    body>
    input type="button" value="设置" />
    input type="button" value="获取" />
    input type="button" value="删除" />
    br/>
    input type="text" />
    /body>
    /html>
    

localStorage的应用

!DOCTYPE html>
    html>
    head>
        meta charset="UTF-8">
        title>
    /title>
        script>
        window.onload = function(){
                var aInput = document.getElementsByTagName('input');
            aInput[0].onclick = function(){
                    //localStorage : 永久性存储                window.localStorage.setItem("name", aInput[3].value);
                    window.localStorage.setItem("name2", 'aaaaa');
            }
    ;
            aInput[1].onclick = function(){
                    alert( window.localStorage.getItem( "name" ) );
                    alert( window.localStorage.getItem( "name2" ) );
            }
    ;
            aInput[2].onclick = function(){
                    window.localStorage.removeItem("name");
    //                window.localStorage.clear();
            }
    ;
        }
        /script>
    /head>
    body>
    input type="button" value="设置" />
    input type="button" value="获取" />
    input type="button" value="删除" />
    br/>
    input type="text" />
    /body>
    /html>
    

!DOCTYPE html>
    html>
    head>
        meta charset="UTF-8">
        title>
    /title>
        script>
        window.onload = function () {
                var aInput = document.getElementsByTagName("input");
                var oT = document.querySelector("textarea");
            if (window.localStorage.getItem("userName")) {
                    aInput[0].value = window.localStorage.getItem("userName");
            }
                for (var i = 0;
     i  aInput.length;
 i++) {
                if (window.localStorage.getItem('sex') == aInput[i].value) {
                        aInput[i].checked = true;
                }
            }
            if (window.localStorage.getItem("note")) {
                    oT.value = window.localStorage.getItem("note");
            }
            window.onunload = function () {
                if (aInput[0].value) {
                        window.localStorage.setItem("userName", aInput[0].value);
                }
                    for (var i = 0;
     i  aInput.length;
 i++) {
                    if (aInput[i].checked == true) {
                            window.localStorage.setItem('sex', aInput[i].value);
                    }
                }
                if (oT.value) {
                        window.localStorage.setItem('note', oT.value);
                }
            }
        }
        /script>
    /head>
    body>
    p>
        用户名: input type="text"/>
    /p>
    p>
        性别: br/>
        input type="radio" name="sex" value="男"/>
    男    input type="radio" name="sex" value="女"/>
    女/p>
    p>
        备注:    textarea cols="30" rows="10">
    /textarea>
    /p>
    /body>
    /html>
    

以上就是HTML5本地存储应用sessionStorage和localStorage的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！