HTML5的存儲

時間 2019-12-09

標籤 html5 html 存儲欄目 HTML5 简体版

原文原文鏈接

1.客戶端存儲的兩種方式

localStoryage：沒有時間限制的。瀏覽器

sessionStoryage：針對一個session的數據存儲。（瀏覽器關閉掉以後就會銷燬）session

2.localStoryage

原理：當使用localStoryage存儲的時候，會存儲在瀏覽器（這裏以谷歌瀏覽器爲例）的Resource下（新版的谷歌瀏覽器是在Application下）的localStoryage中。spa

實例：code

<body >    
        <textarea id="textarea" style="width: 200px;height: 200px;border: 1px solid black;"></textarea>
        <button id="button">保存</button>
<script>
    var textarea = document.getElementById('textarea');
//以後打開會進行讀取
    if(localStorage.text){
        textarea.value = localStorage.text;
    }
    
    var button = document.getElementById('button');
    button.onclick = function(){
//點擊後進行保存
        localStorage.text = textarea.value;
    }
</script>
    </body>

3.seesionStoryage

原理：當使用seesionStoryage存儲的時候，會存儲在瀏覽器（這裏以谷歌瀏覽器爲例）的Resource下（新版的谷歌瀏覽器是在Application下）的sessionStoryage中。blog

實例：ip

<body >    
        <textarea id="textarea" style="width: 200px;height: 200px;border: 1px solid black;"></textarea>
        <button id="button">保存</button>
<script src="js/easeljs.min.js"></script>
<script>
    var textarea = document.getElementById('textarea');
    if(sessionStorage.text){
        textarea.value = sessionStorage.text;
    }
    
    var button = document.getElementById('button');
    button.onclick = function(){
        sessionStorage.text = textarea.value;
    }
</script>
    </body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。