Web Storage

1.Web Storage 是什么?

Web Storage是HTML5新增的功能,可以在本地保存数据。Web Storage存储机制是对cookie存储机制的一种改善。

2.Web Storage 和cookie

在HTML4中,使用cookie保存客户端的数据,但是cookie存储永久数据存在以下问题:

  • 大小:cookie的大小限制在4KB。
  • 带宽:cookie是随着HTTP事务被一起发送的,会浪费一部分带宽去发送cookie。
  • 复杂性:要正确操纵cookie很难。

针对这些问题,HTML5提出了Web Storage

  • Web Storage的容量可以达到5M以上
  • Web Storage的存储是针对客户端本地而言的
  • Web Storage有setItem和getItem等方法,不用像cookie一样需要前端自己去封装setCookie,getCookie

3.sessionStorage和localStorage

Web Storage分为sessionStorage和localStorage两种:

  1. sessionStorage:将数据保存在session对象中,session就是从进入某网站到到关闭网站花费的时间,session对象可以保存这段时间内的任何数据。
  2. localStorage:将数据保存在客户端本地的硬件设备中。

区别:sessionStorage是临时保存,浏览器关闭了数据就没有了,localStorage是永久保存,即使浏览器关闭了,下次打开数据依然存在,可以继续使用。

4.webStorage的使用

webStorage主要用于存储与读取,基本方法

  1. getItem(),setItem()
//保存数据:
sessionStorage.setItem('key','value');
//
sessionStorage.key='value';

localStorage.setItem('key','value');
//
localStorage.key='value';

//读取数据:
变量=sessionStorage.getItem('key');
//
变量=sessionStorage.key;

变量=localStorage.getItem('key');
//
变量=localStorage.key;

读取与保存数据时可按“键值”的形式进行,也可以通过自定义属性值进行。需要注意:在保存数据时不允许重复保存相同的键名,保存后可以修改键值但不能修改键名。

例子(存储单一数据):

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>web storage</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>web storage</h1>
<p id="msg"></p>
<input type="text" id="input" name="">
<input type="button" value="保存数据" onclick="saveStorage('input');">
<input type="button" value="读取数据" onclick="loadStorage('msg');">
</body>
</html>N
View Code

脚本:

function saveStorage(id){
    var target=document.getElementById(id);
    var str=target.value;
    console.log("s");
    sessionStorage.setItem('message',str);
    //sessionStorage.message=str;
}
function loadStorage(id){
    var target=document.getElementById(id);
    var msg=sessionStorage.getItem('message');
    //var msg=sessionStorage.message;
    console.log("s",msg);
    target.innerHTML=msg;

}

function saveStorage(id){
    var target=document.getElementById(id);
    var str=target.value;
    console.log("l");
    localStorage.setItem('message',str);
}
function loadStorage(id){
    var target=document.getElementById(id);
    var msg=localStorage.getItem('message');
    target.innerHTML=msg;
    console.log("l",msg);
}
View Code

效果:

  2.length,key和clear

localStorage.length:所以保存在localStorage中数据的条数

localStorage.key(index):通过将索引号传入,得到对应的数据。

localStorage,clear():将localStorage中的数据全部清除

例子(存储多条数据):

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WEB留言板</title>
<script type="text/javascript" src="script1.js"></script>
</head>
<h1>web留言板</h1>
<textarea id="memo" cols="60" rows="10" ></textarea><br>
<input type="button" value="追加" onclick="saveStorage('memo')" />
<input type="button" name="" value="初始化" onclick="clearStorage('msg')">
<p id="msg"></p>
</html>
View Code

脚本:

function saveStorage(id){
    var data=document.getElementById(id).value;//获取文本内容
    var time=new Date().getTime();
    localStorage.setItem(time,data);
    alert('数据已保存');
    loadStorage('msg');
}

function loadStorage(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);
        var datestr=date.toGMTString();
        result+='<tr><td>'+value+'</td><td>'+datestr+'</td><tr>';
    }
    result+='</table>'
    var target=document.getElementById(id);
    target.innerHTML=result;
}

function clearStorage(){
    localStorage.clear();
    alert('数据已清除');
    loadStorage('msg');
}
View Code

效果:

例子(存储JSON对象):

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用webStorage做数据库</title>
<script type="text/javascript" src="script2.js" ></script>
</head>
<h1>使用webStorage做数据库</h1>
<table>
<tr>
<td>姓名:</td>
<td><input type="text" id="name" /></td>
</tr>
<tr>
<td>性别:</td>
<td><input type="text" id="sex" /></td>
</tr>
<tr>
<td>电话:</td>
<td><input type="text" id="tel" /></td>
</tr>
<tr>
<td>爱好:</td>
<td><textarea id="habit" clos="5" rows="3"></textarea></td>
</tr>
</table>
<input type="button" value="保存" onclick="saveStorage()" name="">
<hr>
<input type="text" id="find" />
<input type="button" value="检索" onclick="findStorage()" name=""><br>
<p id="msg"></p>
</html>
View Code

脚本:

function saveStorage()
{
    var data=new Object();//new一个对象
    data.name=document.getElementById('name').value;
    data.sex=document.getElementById('sex').value;
    data.tel=document.getElementById('tel').value
    data.habit=document.getElementById('habit').value
    var str=JSON.stringify(data);
    localStorage.setItem(data.name,str);
    alert('数据已保存');
}

function findStorage()
{
    var find=document.getElementById('find').value
    var data=localStorage.getItem(find);
    data=JSON.parse(data);
    var result="姓名:"+data.name+"<br>";
    result+="性别:"+data.sex+"<br>";
    result+="电话:"+data.tel+"<br>";
    result+="爱好:"+data.habit+"<br>";
    document.getElementById('msg').innerHTML=result;


}
View Code

效果:

利用storage事件实时监视Web Storage中的数据

window.addEventListener('storage',function(event){
        //当Web Storage发生变化时的操作
                //1.event.key属性:属性值为在session和localStorage中被修改的键值
               //2.event.oldValue:属性值为session和localStorage被修变前的值
               //3.event.newValue:属性值为session和localStorage被修改后的值
               //4.event.url:属性值是被修改的session和localStorage页面的路径
               //5.event.storageArea:属性值是被修改的session和localStorage对象
        }
    },false)    

 

posted @ 2019-07-25 19:16  ellenxx  阅读(259)  评论(0编辑  收藏  举报