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

最新推荐文章于 2017-03-07 20:56:52 发布

wypgany

最新推荐文章于 2017-03-07 20:56:52 发布

阅读量200

点赞数

分类专栏： h5

本文链接：https://blog.csdn.net/wypgany/article/details/53634746

版权

h5 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一.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="保存数据" οnclick="saveStorage('input')">
    <input type="button" value="读取数据" οnclick="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="追加数据" οnclick="saveStorage('memo')">
    <input type="button" value="删除数据" οnclick="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="保存" οnclick="saveStorage()"></td>
        </tr>
    </table>
    <hr><!-- 横线 -->
    <p>请输入要检索的名字：<input id="search" type="text"> <input type="button" value="检索" οnclick="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;
}