HTML5中的离线存储、案例（类似留言板）

1.localstorage（硬盘存储）

2.sessionstorage（客户端存储）

window.localStorage
window.sessionStorage
sessionStorage  //存储是存在浏览器上的
window.sessionStorage.setItem();  //用来存储的方法
window.sessionStorage.getItem(); //获取存储的值
window.sessionStorage.clear();  //清除值

案例---留言板 

<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 message={
        title:document.getElementById("title"),
        content:document.getElementById("content"),
        send:document.getElementById("btnsend"),
        clear:document.getElementById("clear"),
        t2:document.getElementsByClassName("t2")[0],
        //存储代码
        storage_data:function(t,c){
            var time=new Date();  //获取时间
            var timeto=time.toLocaleString(); //时间转化
            var timems=time.getTime();   //总毫秒数
            var data={
                name:"薛之谦",title:t,content:c,time:timeto
            };
            //setItem后为string类型
            window.localStorage.setItem(timems,JSON.stringify(data));    //存储的东西是 time，data
            message.read_data();   //存储之后要将其读取到页面上
        },



        //读取信息
        read_data:function(){
            message.t2.innerHTML = "";
            //遍历存储的数据条长度 即存了几条数据
            for(var i=0;i<window.localStorage.length;i++){
                var key=window.localStorage.key(i);    //拿到当前数据的键值
                var data=JSON.parse(window.localStorage.getItem(key));  //获取存储的值
                message.create(data);   //创建当前数据键值所对应的数据
            }
        },
        create:function(Data){
            var ul=document.createElement("ul");
            var li=document.createElement("li");
            li.innerHTML=Data["name"]+Data["title"]+Data["content"]+"。"+"时间："+Data["time"];
            ul.appendChild(li);
            message.t2.appendChild(ul);
        }
    };



    //点击发表时，读取值
    message.send.addEventListener("click",function(){
        var title=message.title.value;
        var content=message.content.value;
        message.storage_data(title,content);    //参数为标题和内容的值   实参   t，c形参
    });
    //点击清除时，清除数据
    message.clear.addEventListener("click",function(){
        window.localStorage.clear();
        message.read_data();   //清除之后读取信息   效果：点击清除，显示的为空。不然还是在显示上次清除之前的数据
    });
    window.onload=message.read_data();   //网页加载时，显示信息
</script>

效果展示：