HTML5之Web存储

最新推荐文章于 2024-05-17 03:16:49 发布

We_jia

最新推荐文章于 2024-05-17 03:16:49 发布

阅读量284

点赞数

分类专栏： JavaScript 文章标签： localStorage sessionStorage

本文链接：https://blog.csdn.net/We_jia/article/details/87795140

版权

JavaScript 专栏收录该内容

39 篇文章 1 订阅

订阅专栏

HTML5 Web存储介绍

使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.

数据以 键/值对存在, web网页的数据只允许该网页访问使用。

俩种方式：sessionStorage和localStorage

客户端存储：sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
硬盘存储：localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

注意：二者写法完全相同，只是作用不同

存储的方法

  window.sessionStorage.setItem(); 
  window.localStorage.setItem();

获取存储值的方法

 window.sessionStorage.getItem() 
 window.localStorage.getItem()

清除存储值得方法

window.sessionStorage.clear(); 
window.localStorage.clear();

案例

案例采用sessionStorage存储方式，效果图如下：

全部代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .t1 {
            width: 500px;
            height: 300px;
            border: 1px solid silver;
        }

        .t1 input {
            width: 400px;
            outline: none;

        }

        .t1 textarea {
            width: 400px;
            height: 150px;
            resize: none;
            outline: none;

        }

        .t2 {
            width: 500px;
            height: 300px;
            border: 1px solid silver;
            overflow-y: scroll;
        }
    </style>
</head>
<body>
<div class="t1">
    <ul>
        <li>标题：<br/><input id="title" type="text"/></li>
        <li>内容：<br/><textarea id="content"></textarea></li>
        <li>
            <button id="btnsend">发表</button>
            <button id="clear">清除</button>
        </li>
    </ul>
</div>
<div class="t2">
</div>
<script>
    var msg = {
        title: document.getElementById("title"),
        content: document.getElementById("content"),
        btn: document.getElementById("btnsend"),
        clearbtn: document.getElementById("clear"),
        t2:document.getElementsByClassName ("t2")[0],

        //存储代码
        sendmsg: function (t, c) {
            var time = new Date();
            //用户看到的时间
            var usertime = time.toLocaleString();
            //总毫秒数
            var totaltime = time.getTime();
            var data = {username: "小可爱", title: t, content: c, time: usertime};
            window.sessionStorage.setItem(totaltime, JSON.stringify(data));//存储代码   totaltime是键值  JSON.stringify(data)是数据（必须是字符串）
            msg.readmsg();   //以后要读取信息
        },
        //读取信息
        readmsg: function () {
            msg.t2.innerHTML = "";
            for (var i = 0; i < window.sessionStorage.length; i++) {
                var key = window.sessionStorage.key(i);   //取键值
                var data = JSON.parse(window.sessionStorage.getItem (key));
                msg.createElements(data);
            }
        },
        createElements:function (Data){   //将读取到的信息显示在t2位置
            var ul=document.createElement ("ul");
            var li=document.createElement ("li");
            li.innerHTML ="昵称："+Data["username"]+ "  ，标题："+ Data["title"]+"  ，内容："+Data["content"]+ "  ，时间："+Data["time"];
            ul.appendChild (li);
            msg.t2.appendChild(ul);
        }

    };

    msg.btn.addEventListener ("click",function (){
        var title=msg.title.value;
        var content=msg.content.value;
        msg.sendmsg(title,content);
    });
    msg.clearbtn.addEventListener ("click",function (){
        window.sessionStorage.clear();
        msg.readmsg();
    });
    window.onload = msg.readmsg();
</script>
</body>
</html>

We_jia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5之Web存储

HTML5 Web存储介绍使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.数据以键/值对存在, web网页的数据只允许该网页访问使用。俩种方式：sessionStorage和localStora...
复制链接

扫一扫

专栏目录