html5基础(6)web storage ,sessionStorage,localStorage;

版权所有,禁止匿名转载;禁止商业使用。

web Storage功能;

sessionStorage;记录浏览器还没有关闭之前的数据;

appweb1.js

function saveStorage(id) {
    var target=document.getElementById(id);
    var str=target.value;
    //保存数据key value
   
sessionStorage.setItem("message",str);
}
function loadStorage(id) {
   
var  target=document.getElementById(id);
   
var  msg=sessionStorage.getItem("message");
   
target.innerHTML=msg;
}

index.html

<html lang="en">
<head>
   
<meta charset="UTF-8">
   
<title>Title</title>
   
<script src="appweb1.js"></script>
</head>
va
<body>
   
<p id="msg"></p>
   
<input type="text" id="input">
   
<input type="button" value="保存数据" onclick="saveStorage('input')">
   
<input type="button" value="读取数据" onclick="loadStorage('msg')">
</body>
</html>


localStorage:保存到硬件设备中;通常保存用户密码;浏览器关闭了也能读取;

function saveStorage(id) {
    var target=document.getElementById(id);
    var str=target.value;
    //保存数据key value
   
localStorage.setItem("message",str);
}
function loadStorage(id) {
    var  target=document.getElementById(id);
    var  msg=localStorage.getItem("message")
    target.innerHTML=msg;
}

============================================================

简单的留言本;

function  savestoragge(id) {
    var  data=document.getElementById(id).value;
    var  time=new Date().getTime();
    localStorage.setItem(time,data);
    alert("数据已储存");
    loadStoragge('msg')
}
function loadStoragge(id) {
    var  result="<table border='1'>";
    for(var i=0;i<localStorage.length;i++)
    {
        var key=localStorage.key(i);
        var value=localStorage.getItem(key);
        var date=new Date();
        date.setTime(key);
        result+="<tr><td>"+value+"</td><td>"+date+"</td></tr>";
    }
    result+="</table>";
    var target=document.getElementById(id);
    target.innerHTML=result;
}
//清楚所有数据
function clearstoragge() {
    localStorage.clear();
    alert("数据已经清除;");
   loadStoragge('msg')
}

<html lang="en">
<head>
   
<meta charset="UTF-8">
   
<title>Title</title>
   
<script src="appweb1.js"></script>
</head>
<body>
   
<p id="msg"></p>
   
<textarea id="memo" cols="60" rows="10"></textarea>
   
<br/>
   
<input type="button" value="追加数据" onclick="savestoragge('memo')">
   
<input type="button" value="删除数据" onclick="clearstoragge()">
</body>
</html>

==================================

作为数据库使用;

function saveStorage() {
            var  data=new Object();
            data.name=document.getElementById("name").value;
            data.email=document.getElementById("email").value;
            data.tel=document.getElementById("tel").value;
            data.memo=document.getElementById("memo").value;
            var str=JSON.stringify(data);//json数据进行保存;
           
localStorage.setItem(data.name,str);
            alert("数据已保存");
}
function  findStorage(id) {
    var  find=document.getElementById('find').value;
    var  str=localStorage.getItem(find);
    var  data=JSON.parse(str);
    var  result="姓名:"+data.name+"<br/>";
    result+="email"+data.email+"<br/>";
    result+="tel"+data.tel+"<br/>";
    result+="memo"+data.memo;
    var target=document.getElementById(id);
    target.innerHTML=result;
}


<!DOCTYPE html>
<html lang="en">
<head>
   
<meta charset="UTF-8">
   
<title>Title</title>
   
<script src="appweb1.js"></script>
</head>
<body>
 
<table>
     
<tr>
         
<td>姓名:</td>
         
<td><input type="text"id="name"> </td>
     
</tr>
     
<tr>
         
<td>Email</td>
         
<td><input type="text"id="email"> </td>
     
</tr>
     
<tr>
         
<td>电话:</td>
         
<td><input type="text"id="tel"> </td>
     
</tr>
     
<tr>
         
<td>备注:</td>
         
<td><input type="text"id="memo"> </td>
     
</tr>
     
<tr>
         
<td></td>
         
<td><input type="button" value="保存" onclick="saveStorage()"> </td>
     
</tr>



 
</table>
<p>
   
检索
   
<input type="text" id="find">
   
<input type="button" value="检索" onclick="findStorage('msg')">
</p>
<p id="msg"></p>
</body>
</html>




0 0