本地存储-webStorage

最新推荐文章于 2024-05-22 10:07:06 发布

babylove_lin

最新推荐文章于 2024-05-22 10:07:06 发布

阅读量576

点赞数 2

分类专栏： H5 文章标签： javascript 存储

本文链接：https://blog.csdn.net/babylove_lin/article/details/77929646

版权

H5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

webstorage 和本地数据库。Web Storage 是对H4中的cookie机制的改善。由于cookie存在很多缺陷，H5决定不再使用它，转而使用webstorage。本地数据库，顾名思义，就是在客户端本地建立一个数据库，把服务器端的部分数据拿到本地存储，这样就可以为服务器减轻压力，加快访问速度（毕竟，你知道运行本地项目和访问服务器速度上的差别！）。

在H4中，cookie存储永久数据存在这样几个问题：1cookie大小限制为4kb，2cookie是随着HTTP一起发送的，浪费了一定的带宽。3cookie也不是很容易用。

H5中的本地存储，提供两种，sessionstorage 和localstorage。

sessionstorage：将数据保存在session中。（有的小伙伴不知道什么是session，在这里科普一下：当你打开一个浏览器，那么一个session就建立了，从你打开浏览器开始，知道你关闭这个浏览器，这个session都是存在的，session可以保存你在这段时间里的任何数据。）

localstorage：将数据存储在硬盘设备中。也就是我们存的东西，你关了浏览器，即使是关了电脑，也是存在的。就像存了一个电影，啥时候看都OK。

在目前：Firefox3.6+，Chrome6+，Safari5+，opera10.5+，IE8+都是支持的。

下边来点例子，稍微的爽一下下，不会后端怎么了，该存存，该取取，前端也是可以的~~~不过，有一点要说明，前端是能干，不过，安全性真是差太多，重要的数据可不要放前端哦！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webstorage存储和读取</title>
</head>
<body>
    <p id="msg"></p>
    请输入数据：<input type="text" id="input"> <br>
    <input type="button" οnclick="saveData('input')" value="保存数据"> <br>
    <input type="button" οnclick="loadData('msg')" value="读取数据">
</body>
<script>
    /*session存储开始*/
    function saveData(id) {
        var target=document.getElementById(id);
        var str=target.value;
        sessionStorage.setItem('message',str); //将str存储到message中
    }
    function loadData(id) {
        var target=document.getElementById(id);
        var msg=sessionStorage.getItem('message');//从session中拿到message
        target.innerHTML=msg;
    }
    /*session存储结束*/

    /*localstorage存储开始*/
    function saveData1(id) {
        var target=document.getElementById(id);
        var str=target.value;
        localStorage.setItem('message',str); //将str存储到message中
    }
    function loadData1(id) {
        var target=document.getElementById(id);
        var msg=localStorage.getItem('message');//从session中拿到message
        target.innerHTML=msg;
    }
    /*localstorage存储结束*/
</script>
</html>

读者可以到浏览器中去查看存储的数据，方法是以Chrome为例：F12-》application-》storage-》localstorage或者sessionstorage，注意一个是永久存储，另一个是会话存储。

下面我们来做一个简单的留言板。目的是用storage来存储大量的数据。

我们要显示文本内容，以及时间日期。在这里，我们的数据必须是以键值对的形式存储。我们让文本内容作为键值，日期时间作为键名。为什么呢？因为时间不会重复！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言板</title>
</head>
<body>
    <h1>留言板</h1>
    <textarea name="" id="demo" cols="50" rows="10"></textarea> <br>
    <input type="button" value="追加" οnclick="saveData('demo')"> <br>
    <input type="button" value="初始化" οnclick="clearData('demo')">
    <hr>
    <p id="msg"></p>
</body>
<script>
    window.οnlοad=function () {
        loadData('msg');
    }
    function saveData(id) {
        var date=document.getElementById(id).value;
        var time=new Date().getTime();
        localStorage.setItem(time,date);
        alert("保存完成！");
        loadData('msg');
    }
    function loadData(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);
            var dateStr=date.toLocaleString();
            result+='<tr><td>'+value+'</td><td>'+dateStr+'</td></tr>';
        }
        result+='</table>';
        var target=document.getElementById(id);
        target.innerHTML=result;
    }
    function clearData() {
        localStorage.clear();
        alert("清除数据");
        loadData('msg');
    }
</script>
</html>

以上就是关于本地存储的一些介绍，欢迎大家互相沟通交流！请多指教

babylove_lin

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
本地存储-webStorage

webstorage 和本地数据库。Web Storage 是对H4中的cookie机制的改善。由于cookie存在很多缺陷，H5决定不再使用它，转而使用webstorage。本地数据库，顾名思义，就是在客户端本地建立一个数据库，把服务器端的部分数据拿到本地存储，这样就可以为服务器减轻压力，加快访问速度（毕竟，你知道运行本地项目和访问服务器速度上的差别！）。在H4中，cookie存储永久数
复制链接

扫一扫

专栏目录