知识归纳
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+" "+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+" "+Times()+"</li>")
$("ul").show()
$("ul").append(oDom)
$("#text").val("")
})
})
</script>
刷新后当前发送的时间是不会变的