1.客户端存储的两种方式
localStoryage:没有时间限制的。
sessionStoryage:针对一个session的数据存储。(浏览器关闭掉之后就会销毁)
2.localStoryage
原理:当使用localStoryage存储的时候,会存储在浏览器(这里以谷歌浏览器为例)的Resource下(新版的谷歌浏览器是在Application下)的localStoryage中。
实例:
<body >
<textarea id="textarea" style=" 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中。
实例:
<body >
<textarea id="textarea" style=" 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>