带有localStroage的简易留言板

知识归纳

1.API

length	获取当前WebStorage中的数目
key	返回WebStorage中的第N个存储条目
getItem(key)	返回指定key的存储内容，如果不存在则返回null。注意,返回的类型是字符串类型
setItem(key,value)	设置指定key的内容的值为value
removeItem(key)	根据指定的key，删除键值为key的内容
clear	清空webStorage的内容

2.数据的存储与获取

在localStorage中设置键值对可以应用setItem()

localStorage.setItem("key","value")

 在localStorage获取数据可以用getItem()

var val = localStroage.getItem("key")

当然也可以直接使用localStorage的key方法，而不使用setItem()和getItem()，代码如下:

localStroage.key = "value" var val = localStroage.key

3.数据清除和清空

removeItem()用于Stroage列表删除数据

var val = localStroage. removeItem(key)

 clear()方法用于清空整个列表的所有数据

localStroage.clear()

 同时可以通过使用length属性获取sessionStorage中存储的键/值对的个数

上小练习代码

用的jq1.11版本

<textarea id="text"></textarea>
<button class="btn">发送</button>
<ul></ul>

<script>
		$(function(){
			function Times(){      //时间函数
				var myDate = new Date()
				var year = myDate.getFullYear()
				var month = myDate.getMonth()+1
				var odate = myDate.getDate()
				var h = myDate.getHours()
				var m = myDate.getMinutes()
				var s = myDate.getSeconds()
				var now = year+'-'+month+"-"+odate+" "+h+':'+m+":"+s;
				return now
			}
			
			var oA = JSON.parse(localStorage.getItem("a")) || []     //开一个数组存储数据
			if (oA.length>0) {                              //页面刷新后，本地存储的数据会通过循环出来
				var str = ""
				for (var i=0;i<oA.length;i++) {
					str+="<li>"+oA[i].txt+"&nbsp;&nbsp;"+oA[i].time+"</li>"
				}
				$("ul").show()
				$("ul").append(str)
			}
            $(".btn").click(function(){
            	var oText = $("#text").val()
            	var obj = {               //这里开了个对象存储数据
            		"txt":oText,
            		"time":Times()            		
            	}
            	oA.push(obj)         //每留言一次会遍历进数组一次
            	localStorage.setItem("a",JSON.stringify(oA))
            	var oDom = $("<li>"+oText+"&nbsp;&nbsp;"+Times()+"</li>")
            	$("ul").show()
            	$("ul").append(oDom)
            	$("#text").val("")
            })
		})
			
		</script>

刷新后当前发送的时间是不会变的