• HTML5--sessionStorage、localStorage、manifest


    sessionStroage:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        </script><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <title>Title</title>
    </head>
    <body>
    <input type="text" id="userName" value="123"><br>
    <button id="btn1Id">设置数据</button>
    <button id="btn2Id">设置数据</button>
    <input id="btn3Id" type="button" value="设置数据"></input>
    <script type="text/javascript">
        document.querySelector("#btn1Id").onclick = function () {
            var userName = document.querySelector("#userName").value;
            window.sessionStorage.setItem("name",userName);
        };
        document.querySelector("#btn2Id").onclick = function () {
            alert(window.sessionStorage.getItem("name"));
        };
        $("#btn3Id").click(function () {
            window.sessionStorage.removeItem("name");
        });
        </script>
    </body>
    </html>
    

      localStroage

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        </script><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <title>Title</title>
    </head>
    <body>
    <input type="text" id="userName" value="123"><br>
    <button id="btn1Id">设置数据</button>
    <button id="btn2Id">设置数据</button>
    <input id="btn3Id" type="button" value="设置数据"></input>
    <script type="text/javascript">
        document.querySelector("#btn1Id").onclick = function () {
            var userName = document.querySelector("#userName").value;
            window.localStorage.setItem("name",userName);
        };
        document.querySelector("#btn2Id").onclick = function () {
            alert(window.localStorage.getItem("name"));
        }
        $("#btn3Id").click(function () {
            window.localStorage.removeItem("name");
        })
    </script>
    </body>
    </html>
    

     manifest

     

    <!DOCTYPE html>
    <html lang="en" manifest="dome.appcache">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            img{
                 300px;
                height: 100px;
                display: block;
            }
        </style>
    </head>
    <body>
    <img src="http://img.redocn.com/sheying/20150213/mulanweichangcaoyuanfengjing_3951976.jpg" alt="">
    <img src="http://pic51.nipic.com/file/20141025/8649940_220505558734_2.jpg" alt="">
    <img src="http://pic46.nipic.com/20140815/2531170_172548240000_2.jpg" alt="">
    <img src="http://pic25.nipic.com/20121112/9252150_150552938000_2.jpg" alt="">
    </body>
    </html>
    

      

  • 相关阅读:
    Tiny-Core-Linux 9.x:安装oracle【11g|】:艰难的旅程,不过,最终成功了!:mini-install
    调研高层次人才落户的补贴标准
    充当好基层治理的“绣花针”
    对互联网广告监管的几点实践与思考
    合抱之木,生于毫末;九层之台
    JVM
    Apex Salesforce
    maven 地址
    JVM
    使用jmap和MAT进行堆内存溢出分析
  • 原文地址:https://www.cnblogs.com/eadela/p/11299356.html
Copyright © 2020-2023  润新知