Web Storage

最新推荐文章于 2024-07-10 16:57:46 发布

TF_LIU

最新推荐文章于 2024-07-10 16:57:46 发布

阅读量222

点赞数

分类专栏： h5 文章标签： html5 web

本文链接：https://blog.csdn.net/u014604726/article/details/52599212

版权

h5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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;
}

TF_LIU

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web Storage

Web Storage概述在html5中，除了canvas元素之外，另一个新增的非常重要的功能是可以在客户本地保存数据的web storage功能，之前可以使用cookies在客户端保存诸如用户名等简单的信息，但是通过长期的使用，人们发现用cookies储存永久数据存在几个问题。－大小：cookies的大小被限制在4kb －带宽：cookies是随http事务一起被发送的，因此会浪费一部分发送
复制链接

扫一扫