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>