欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

localStorage使用

程序员文章站 2022-03-03 22:37:38
...

1.html

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <title>Title</title>
    6. 

  6. </head>
    7. 

  7. <body>
    8. 

  8.     <div id="div" style="height: 200px;width: 200px" >
    9. 

  9.         <button id="button">点击</button>
    10. 

  10.         <button id="button2">点击</button>
    11. 

  11.     </div>
    12. 

  12.     <script>
    13. 

  13.        var div= document.getElementById("div");
    14. 

  14.        var button= document.getElementById("button");
    15. 

  15.        var button2= document.getElementById("button2");
    16. 

    17. 

  17.        var bgcolor = window.localStorage.getItem('bgcolor');
    18. 

  18.        console.log(bgcolor)
    19. 

    20. 

  20.        button.onclick=function () {
    21. 

  21.            bgcolor =prompt("请输入颜色");
    22. 

  22.            window.localStorage.setItem('bgcolor',bgcolor);
    23. 

  23.            div.style.background = bgcolor;
    24. 

  24.        }
    25. 

  25.        button2.onclick=function () {
    26. 

  26.           parent.location="2.html"
    27. 

  27.        }
    28. 

    29. 

    30. 

  30.     </script>
    31. 

  31. </body>
    32. 

  32. </html>
    33.

2.html

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <title>2</title>
    6. 

  6. </head>
    7. 

  7. <body id="body">
    8. 

    9. 

  9. <script>
    10. 

  10.     onload=function () {
    11. 

  11.         bgcolor =  window.localStorage.getItem('bgcolor');
    12. 

  12.         document.getElementById("body").style.background=bgcolor;
    13. 

  13.     }
    14. 

  14. </script>
    15. 

  15. </body>
    16. 

  16. </html>
    17.

上一篇： php的explode() 函数将字符串打散为数组

下一篇： 微信公众号开发《三》微信JS-SDK之地理位置的获取与在线导航，集成百度地图实现在线地图搜索

推荐阅读