localstorage本地存储的应用

Posted 2020-11-09 风流倜傥任潇洒，不负青春好年华。

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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本地存储的应用的主要内容，如果未能解决你的问题，请参考以下文章

[html5]localStorage的原理和HTML5本地存储安全性

localStorage本地存储数组读取修改删除

HTML5 Localstorage & jQuery：删除以某个单词开头的本地存储键

前端自定义网址功能 localStorage 本地存储？

localStorage本地存储的用法

localStorage本地存储的简单使用