HTML5 JS API 本地存儲LocalStorage基本操作


LocalStorage:
使用方法與SessionStorage如出一轍,如下代碼所示:
此對象主要有兩個方法:
保存數據:localStorage.setItem(Key, value);
讀取數據:localStorage.getItem(Key);
Key:表示你要存入的鍵名稱,此名稱可以隨便命名,可以按照變量的意思來理解。
Value:表示值,也就是你要存入Key中的值,可以按照變量賦值來理解。

使用方法:
保存數據:localStorage.setItem("website", "W3Cfuns.com");
讀取數據:localStorage.getItem("website");


案例如下:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312">
        <title>HTML5每日一練之JS API-本地存儲LocalStorage | 前端開發網(W3Cfuns.com)!</title>
        <script type="text/javascript">
                window.onload = function()
                {
                        alert("當你關閉此頁面或者關閉瀏覽器的時候,localStorage中保存的數據才會消失,也就是說重新打開此頁面的時候,點擊獲取數據,可以取到數據。")
                        
                        //首先獲得body中的3個input元素
                        var msg = document.getElementById("msg");
                        var getData = document.getElementById("getData");
                        var setData = document.getElementById("setData");
                        
                        setData.onclick = function()//存入數據
                        {
                                if(msg.value)
                                {
                                        localStorage.setItem("data", msg.value);
                                        alert("信息已保存到data字段中");
                                }
                                else
                                {
                                        alert("信息不能為空");
                                }
                        }
                        
                        getData.onclick = function()//獲取數據
                        {
                                var msg = localStorage.getItem("data");
                                if(msg)
                                {
                                        alert("data字段中的值為:" + msg);
                                }
                                else
                                {
                                        alert("data字段無值!");
                                }
                        }
                }
        </script>
    </head>
    
    <body>
            <input id="msg" type="text"/>
        <input id="setData" type="button" value="保存數據"/>
        <input id="getData" type="button" value="獲取數據"/>
    </body>
</html>

 

 

尊重每一名RD成果。。原文鏈接:http://www.w3cfuns.com/article-5592538-1-1.html

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM