1、web存储数据的两种方式
localStorage-没有时间限制的数据存储
sessionStorage-针对一个session的数据存储(页面关闭时清楚数据)
与cookie对比:cookie不适合做大量数据的存储,速度慢且效率不高。
2、localStorage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<textarea style="width: 200px;height: 200px" id="mytxt"></textarea>
<button id="mybtn">保存</button>
<script>
var mytxt;
var mybtn;
window.οnlοad=function () {
mytxt=document.getElementById("mytxt");
if(localStorage.text){
//不为空时
mytxt.value=localStorage.text;
}
mybtn=document.getElementById("mybtn");
mybtn.οnclick=function(){
//alert(mytxt.value);
localStorage.text=mytxt.value;
}
}
</script>
</body>
</html>
3、sessionStorage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span id="txt">0</span>
<button id="mybtn">Add</button>
<script>
var myspan;
var mybtn;
var num=0;
window.οnlοad=function () {
myspan=document.getElementById("txt");
mybtn=document.getElementById("mybtn");
if(sessionStorage.num){
num=sessionStorage.num;
showNum();
}else{
num=0;
}
mybtn.οnclick=function () {
num++;
sessionStorage.num=num;
showNum();
}
}
function showNum(){
myspan.innerHTML=num;
}
</script>
</body>
</html>