Web Storage

来源：互联网发布：企业数据资产管理编辑：程序博客网时间：2024/04/26 15:50

Web Storage概述

在html5中，除了canvas元素之外，另一个新增的非常重要的功能是可以在客户本地保存数据的web storage功能，之前可以使用cookies在客户端保存诸如用户名等简单的信息，但是通过长期的使用，人们发现用cookies储存永久数据存在几个问题。
－大小：cookies的大小被限制在4kb
－带宽：cookies是随http事务一起被发送的，因此会浪费一部分发送coolies时使用的带宽
－复杂性：正确的操作cookies是很困难的。
针对以上问题，html5中，重新提供了一种在客户端本地保存数据的功能，他就是web storage功能

顾命思议，web storage功能就是web上面储存数据的功能，这里的储存是针对客户端本地而言的，具体分两种：
sessionStorage: 将数据保存在session对象中，session是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。
localStorage:将数据保存在客户端本地的硬件设备（硬盘）中，即使浏览器被关闭了，数据仍然存在，下一次打开浏览器访问网站时仍然可以继续使用。
代码如下：
sessionStorage:(只要关闭本页面就不再存贮，不是必须整个浏览器)
html代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>web1</title>    <script src="appWeb1.js"></script></head><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>

js 代码：

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

localStorage代码之变换js的存储方式

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

简单Web留言板
代码如下
html

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

js：

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);        result += "<tr><td>"+value+"</td><td>"+date+"</td></tr>";    }    result +="</tabel>";    var target = document.getElementById(id);    target.innerHTML = result;}function clearStorage() {    localStorage.clear();    alert("数据已经删除");    loadStorage('msg');}

作为简单数据库来利用

将Web Storage作为简易数据库，如果能解决数据检索，对列进行管理，就可以将Web Storage作为数据库来利用了。

html代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>简单数据库</title>    <script src="appWeb3.js"></script></head><body><table>    <tr>        <td>姓名:</td>        <td><input type="text" id="name"></td>    </tr><br>    <tr>        <td>Email:</td>        <td><input type="text" id="email"></td>    </tr><br>    <tr>        <td>电话号码:</td>        <td><input type="text" id="tel"></td>    </tr><br>    <tr>        <td>备注:</td>        <td><input type="text" id="memo"></td>    </tr><br>    <tr>        <td></td>        <td><input type="button" value="保存" onclick="saveStorage()"></td>    </tr></table><hr><p>检索    <input type="text" id="find">    <input type="button" value="检索" onclick="findStorage('msg')"></p><p id="msg"></p></body></html>

js代码如下

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);    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 = "name: "+data.name + "<br>";    result += "email: "+data.email + "<br>";    result += "tel: "+data.tel + "<br>";    result += "memo: "+data.memo + "<br>";    var target = document.getElementById(id);    target.innerHTML = result;}

0 0