Web前端开发学习之路——网页存储Web Storage（一）

认识Web Storage

Web Storage是一种将少量数据存储在客户端(Client)磁盘的技术。只要支持WebStorage API规格的浏览器，网页设计者都可以使用JavaScript来操作它，在网页没有Web Storage之前，其实已有在客户端存储少量数据的功能，称为Cookie，两者有一些不同和相同之处。

存储大小不同：Cookie只允许每个网站在客户端存储4KB的数据，而在HTML5中，Web Storage的容量由浏览器绝对，一般为1MB~5MB
安全性不同：Web Storage运行于客户端，不会出现Cookie值给服务器端使得安全性降低
都以一组key-value对应保存数据：Cookies是以一组key-value对应的组合保存数据，Web Storage也是同样方式

Web Storage提供两种方式将数据保存在客户端：一种是localStorage，另一种是sessionStorage，两者主要差异在于生命周期以及有效范围，参考如下表格。

Web Storage类型	生命周期	有效范围
localStorage	执行删除命令才会消失	同一网站的网页可以跨窗口和分页
sessionStorage	浏览器窗口或分页(tab)关闭就会消失	仅对当前浏览器窗口或分页有效

检测浏览器是否支持Web Storage

  if(typeof(Storage)=="undefined")
    {
        alert("您的浏览器不支持Web Storage")
    }
    else
    {
        //localStorage和sessionStorage程序代码
    }

目前Internet Explorer 8+、Firefox、Opera、Chrome和Safari都支持Web Storage。需要注意的是，IE和FireFox测试时需要把文件上传到服务器或localhost才能运行。建议测试时使用Google Chrome浏览器。

访问localStorage的方法

存储使用setItem方法，其格式如下：

window.localStorage.setItem(key,value);

我们指定一个localStorage变量user,并且指定它的值为“Hello World!”，可以这样写：

window.localStorage.setItem("userdata","Hello World!");

读取user数据时，则使用getItem方法，格式如下：

window.localStorage.getItem(key);

例如：

var valuel = window.localStorage.getItem("userdata");

数组索引存储语法：

window.localStorage["userdata"]="Hello World";

数组读取语法：

var value = window.localStorage["userdata"];

属性存储语法：

window.localStorage.userdata="Hello World!";

属性读取语法：

var value1 = window.localStorage.userdata;

下面进行实际操作，建议使用Chrome浏览器进行浏览。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web Storage Test</title>
    <link rel="stylesheet" type="text/css" href="color.css">
    <script type="text/javascript">
        function onLoad()
        {
            if(typeof(Storage)=="undefined")
                {
                    alert("您的浏览器不支持Web Storage")
                }
            else
                {
                    btn_save.addEventListener("click",saveToLocalStorage);
                    btn_load.addEventListener("click",loadFromLocalStorage);
                }
        }
        function saveToLocalStorage() {
            localStorage.username = inputname.value;
        }
        function loadFromLocalStorage() {
            show_LocalStorage.innerHTML = localStorage.username+" Hello!Welcome to my website!";
        }
    </script>
</head>
<body>
<body onload="onLoad()">         <!--调用onLoad方法-->
<img src="images/welcome.jpg"><br/>
    请输入你的姓名：<input type="text" id="inputname" value=""><br/>
    <div id="show_LocalStorage"></div><br/>
    <button id="btn_save">存储到LocalStorage</button>
    <button id="btn_load">从LocalStorage读取数据</button>
</body>
</body>
</html>

下图是运行结果，先输入姓名，点击存储到“LocalStorage”按钮时，数据就会被存储，再单击“从LocalStorage读取数据”按钮时，就会将名字显示出来。

删除LocalStorage

要删除某一条localStorage数据，可以调用removeItem方法或者delete属性进行删除，如下：

window.localStorage.removeItem("userdata");
delete window.localStorage.userdata;
delete window.localStorage["userdata"];
localStorage.clear();//删除localStorage全部数据

下面我为之前的范例增加一个“清除localStorage数据”的按钮，以达到我们的需求，我们只需增添部分代码即可。

btn_save.addEventListener("click",saveToLocalStorage);
btn_load.addEventListener("click",loadFromLocalStorage);
btn_clear.addEventListener("click",clearLocalStorage);//清除localStorage命令

function clearLocalStorage() {
            localStorage.clear();
            show_LocalStorage.innerHTML = localStorage.username;
        }//清除数据方法

<button id="btn_save">存储到LocalStorage</button>
<button id="btn_load">从LocalStorage读取数据</button>
<button id="btn_clear">清除LocalStorage数据</button><!--新增清除数据按钮-->

运行结果如下，点击“清除LocalStorage数据”按钮后会出现undefined字样则表示清除完成。

访问SessionStorage

存储

window.sessionStorage.setItem("userdata","Hello World!");
window.sessionStorage["userdata"]="Hello World!";
window.sessionStorage.userdata="Hello World!";

读取

var value1 = window.sessionStorage.getItem("userdata");
var value1 = window.sessionStorage["userdata"];
var value1 = window.sessionStorage.userdata;

清除

window.sessonStorage.removeItem("userdata");
delete window.sessionStorage.userdata;
delete window.sessionStorage["userdata"];
sessionStorage.clear();//全部清除

相关实例练习会在下一篇文章中继续学习...