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>

localstorage本地存储的应用

猜你喜欢