localstorage本地存储的应用

最新推荐文章于 2022-09-23 18:47:05 发布

会做饭的技术男

最新推荐文章于 2022-09-23 18:47:05 发布

阅读量141

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog.php?id=hji1cj0jcbaa&title=localstorage%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8%E7%9A%84%E5%BA%94%E7%94%A8

版权

前端专栏收录该内容

2507 篇文章 12 订阅

订阅专栏

<!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>