SEARU.ORG
当前位置:SEARU.ORG > Linux 新闻 > 正文

HTML5 之 web本地存储

客户端存储数据的2种新方式

以前我们都使用cookie存储客户端不只一次使用的数据,html5又带来了2种新方式:localStorage 与 sessionStorage,比cookie存储机制更有优势。

sessionStorage

sessionStorage的介绍: 所谓session,是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间。session对象可以用来保存这段时间内所要求保存的任何数据。

特点:临时保存,将数据保存再session对象中,当用户关闭浏览器窗口后,数据会被删除。

使用方法:

    保存数据:sessionStorage.setItem(key, value);

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

在保存数据时,如果使用sessionStorage读取或保存数据,则需要使用sessionStorage对象并调用该对象的读取方法。保存时不允许重复保存相同的简明,保存后可以修改键值,但不允许修改键名(只能重新取键名,然后保存键值)。

示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>web Storage示例</title>
    <script type="text/javascript" src="js/storage.js"></script>
</head>
<body>
    <h1>web Storage 示例</h1>
    <p id="info"></p>
<input type="text" id="input">
<input type="button" value="保存数据" onclick="saveData()">
<input type="button" value="读取数据" onclick="loadData()">
</body>
</html>
function saveData(){
    var btn = document.getElementById("input");
    var v = btn.value;
    sessionStorage.setItem("msg",v);
};

function loadData(){
    var btn2 = document.getElementById("info");
    var v2 = sessionStorage.getItem("msg");
    btn2.innerHTML = v2;
}

执行效果如下,存储于本地sessionStorage数据库,关闭浏览器重新打开,数据被删除。


localStorage

localStorage的介绍:将数据保存再客户端本地的硬件设备(通常指硬盘,但也可以是其他硬件设备)中,即使浏览器被关闭了,该数据依然存在,下次打开浏览器范文网站时仍然可以继续使用。

特点:永久保存,没有时间限制的数据存储。

使用方法:

    保存数据:localStorage.setItem(key, value);

    读取数据:变量 = localStorage.getItem(key);

在保存数据时,如果使用localStorage读取或保存数据,则需要使用localStorage对象并调用该对象的读取方法。保存时不允许重复保存相同的简明,保存后可以修改键值,但不允许修改键名(只能重新取键名,然后保存键值)。

示例:

function saveData(){
    var btn = document.getElementById("input");
    var v = btn.value;
    localStorage.setItem("msg",v);
};

function loadData(){
    var btn2 = document.getElementById("info");
    var v2 = localStorage.getItem("msg");
    btn2.innerHTML = v2;
}


执行效果如下,存储于本地localStorage数据库,关闭浏览器重新打开,数据不会被删除。



注意!!!:localStorage的数据保存是按不同的浏览器分别进行的,也就是说,如果打开别的浏览器,是读取不到在这个浏览器中保存的数据的。

localStorage和sessionStorage 与 cookie的对比:

cookie不适合大量数据的存储,因为他们由对每个服务器的请求来传递,这使得cookie速度很慢效率也不高。cookie存储机制主要有以下几方面的问题:

    大小:    cookies的大小被限制在4KB。

    带宽:    cookies是随HTTPS事务一起被发送的,因此会浪费一部分发送cookies时使用的带宽。

    复杂性: 要正确地操作cookies还是很困难的。


未经允许不得转载:SEARU.ORG » HTML5 之 web本地存储

赞 (0)
分享到:更多 ()

评论 0