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>

查看全文

相关阅读:
安卓版php服务器的mysql数据库增删改查简单案例
 PHP之Mysql常用SQL语句示例的深入分析
 PHP文件上传主要代码讲解
 只能输入数字的文本框-php
Unknown column '' in 'field list'解决方案
 PHP mysqli连接MySQL数据库
 Php连接及读取和写入mysql数据库的常用代码
 mysqli 操作数据库
 类的静态变量访问
 用JS添加文本框案例代码

原文地址：https://www.cnblogs.com/lwj820876312/p/9102832.html