zoukankan      html  css  js  c++  java
  • localstorage本地存储的应用

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <p id="text">我是段落</p>
        <button onclick="saveText()">存储文字</button>
        <button onclick="getText()">取得文字</button>
        <button onclick="removeText()">删除文字</button>
        <p id="showText"></p>
        <script>
            window.onload=function(){
          //浏览器加载时拿到本地存储的值
    var showText=document.getElementById('showText'); var localP=localStorage.getItem('p') if(localP){ showText.innerHTML=localP; } } function saveText(){ var text=document.getElementById('text').innerHTML; localStorage.setItem('p',text); } function getText(){ var localP=localStorage.getItem('p'); var showText=document.getElementById('showText'); showText.innerHTML=localP; } function removeText(){ localStorage.removeItem('p') } </script> </body> </html>

     如下是面向对象的写法,更直观了

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <p id="text">我是段落</p>
        <button onclick="doLocalStorage.saveText()">存储文字</button>
        <button onclick="doLocalStorage.getText()">取得文字</button>
        <button onclick="doLocalStorage.removeText()">删除文字</button>
        <p id="showText"></p>
        <script>
            window.onload=function(){
                doLocalStorage.init();
            }
            var doLocalStorage={
                init:function(){
                    var showText=document.getElementById('showText');
                    var localP=localStorage.getItem('p')
                if(localP){
                    showText.innerHTML=localP;
    
                }
                },
                saveText:function(){
                var text=document.getElementById('text').innerHTML;
                localStorage.setItem('p',text);
            },
            removeText:function(){
                localStorage.removeItem('p')
            },
            getText:function(){
                var localP=localStorage.getItem('p');
            var showText=document.getElementById('showText');
                    showText.innerHTML=localP;
                
            }
    
            }
        </script>
    </body>
    </html>
  • 相关阅读:
    Kafka中的数据清理(logdeletion)
    genymotion虚拟器笔记
    layui hover显示图片
    vue 导出到excel
    el-tree知识积累
    js 含有对象的数组去重
    苏宁易购价格爬取(golang)
    vue+elementui+beego笔记
    vue笔记
    beego笔记
  • 原文地址:https://www.cnblogs.com/lwj820876312/p/9102832.html
Copyright © 2011-2022 走看看