三十一、Html5中的web存储-CSDN博客

本文链接：https://blog.csdn.net/weixin_40976555/article/details/80715089

一、在客户端存储数据的两种方法：

1.localStorage:没有时间限制的数据存储；

sessionStorage:针对一个session的数据存储；

由cookie完成，但cookie不适合大量数据的存储，因为其由每个服务器的请求来传递，使得cookie速度很慢且效率不高

2.在h5中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。H5使用JavaScript来存储和访问数据。

二、客户端存储数据区别：

1.localStorage方法：存储的数据没有时间限制，本地存储方式，数据一直会被保留；

2.sessionStorage方法：针对一个session进行数据存储，当用户关闭浏览器窗口后，数据会被删除。

3.存取值：两种存储数据存取值方法一致；

localStorage.setItem(key,值); //存值

localStorage.getItem(key); //取值

客户端存储数据在存取值时需要用到键值，键值一致时才可以读取数据；

三、web存储实例：简易留言板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin: 0;padding: 0;}
        .block{
            width: 800px;
            height: 600px;
            border: 1px solid black;
            margin: 0 auto;
        }
        .up{
            height: 300px;
            border-bottom: 1px solid black;
            position: relative;
        }
        .ulist{
            position: absolute;
            left: 40px;
            top: 20px;
        }
        li{
            list-style: none;
        }
        #txt{
            width: 350px;
            height: 180px;
            resize: none;/*去除文本域的拉伸*/
        }
    </style>
</head>
<body>
<div class="block">
    <div class="up">
        <ul class="ulist">
            <li>标题:<input id="title" type="text"/></li>
            <li>内容:<br/><textarea name="" id="txt" cols="30" rows="10"></textarea></li>
            <li><button id="sumbit">发表</button><button id="clear">清除</button></li>
        </ul>
    </div>
    <div class="down">
    </div>
</div>
<script>
    var sumbit=document.getElementById("sumbit");
    var down=document.getElementsByClassName("down")[0];
    var clear=document.getElementById("clear");
    //删除事件
    clear.οnclick=function(){
        localStorage.clear();
    };
    //发表按钮存值事件
    sumbit.οnclick=function (){
        var title=document.getElementById("title").value;
        var txt=document.getElementById("txt").value;
        //建立json数据
        var data={"title":title,"txt":txt};
        //获取时间
        var time=new Date().getTime();
        //离线存储数据
        localStorage.setItem(time,JSON.stringify(data));
        //JSON.stringify(data);将json对象转化为json类型的字符串数组
        //调用显示函数
        showData();
    };
    //showData();
    function showData() {
        down.innerHTML="";
        for(var i=0;i<localStorage.length;i++){
            //将索引值转化为key值
            var key=localStorage.key(i);
            var data=JSON.parse(localStorage.getItem(key));
            //JSON.parse() 方法用于将一个 JSON 字符串转换为对象
            //localStorage.getItem(key) 利用键值key读取存储值
            var time=new Date(parseInt(key)).toLocaleTimeString();//key为字符串类型 需先转换为number类型

            //动态创建dom元素绑定数据
            var str=" <div> <div>标题：<span>"+data.title+
                "</span> 时间：<span>"+time+"</span> </div> <div>" +
                data.txt+" </div> </div>";
            down.innerHTML+=str;
        }
    }
</script>
</body>
</html>