极客学院----H5的相关笔记----H5基础（7）

来源：互联网发布：捕风捉影软件编辑：程序博客网时间：2024/05/29 16:46

一.WebStorage概述（本地保存数据）

1.WebStorage功能：在Web上储存数据的功能。

2.分为两种

（1）sessionStorage：将数据保存在session对象中。session是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间。session对象可用来保存在这段时间内所要求保存的任何数据。

（2）localStorage：将数据保存在客户端本地的硬件设备（硬盘）中，即使浏览器被关闭了，该数据仍然存在，下一次打开浏览器访问网站时仍然可以继续使用。eg.登录名，密码

以上两种都可用清空cookie来清空它们的内容

3.sessionStorage的例子如下：

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

sessionStorage.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的例子只需将上述例子中的sessionStorage改成localStorage即可。

二.简单的Web留言本

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

appWeb2.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 += "</table>";// 这里并不是有序添加    var target = document.getElementById(id);    target.innerHTML = result;    }function  clearStorage() {    localStorage.clear();    alert("数据已经清空");    loadStorage('msg');// 将清空数据后的效果显示出来}

三.作为简单数据库来使用

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>作为简单数据库来利用</title>    <script src="saveAndSearch.js"></script></head><body>    <table>        <tr>            <td>姓名：</td>            <td><input id="name" type="text"></td>        </tr>        <tr>            <td>邮件：</td>            <td><input id="email" type="text"></td>        </tr>        <tr>            <td>电话号码：</td>            <td><input id="phone" type="text"></td>        </tr>        <tr>            <td>备注：</td>            <td><input id="memo" type="text"></td>        </tr>        <tr>            <td></td>            <td><input type="button" value="保存" onclick="saveStorage()"></td>        </tr>    </table>    <hr><!-- 横线 -->    <p>请输入要检索的名字：<input id="search" type="text"> <input type="button" value="检索" onclick="searchStorage('search')"></p>    检索结果：<p id="msg"></p></body></html>

saveAndSearch.js

function saveStorage() {    var data = new Object;    data.name = document.getElementById("name").value;    data.email = document.getElementById("email").value;    data.phone = document.getElementById("phone").value;    data.memo = document.getElementById("memo").value;    // 已JSON的形式保存    var str = JSON.stringify(data);    localStorage.setItem(data.name,str);    alert("数据已保存");}function searchStorage(id) {    var search = document.getElementById(id).value;    var str = localStorage.getItem(search);/*此处获取的是JSON数据*/    var data = JSON.parse(str);    var result = "姓名：" + data.name + "<br/>";        result += "邮件：" + data.email + "<br/>";        result += "电话号码：" + data.phone + "<br/>";        result += "备注：" + data.memo + "<br/>";    var target = document.getElementById("msg");    target.innerHTML = result;}

0 0