首页 > 代码库 > html5 localStorage讲解
html5 localStorage讲解
早期的web中使用cookies在客户端保存诸如用户名等简单的信息，但是，在使用cookies存储永久数据存在以下问题。
1.cookies的大小限制在4kB，不适合大量的数据存储。
2.浏览器还限制站点可以在用户计算机上存储的cookies的数量。
3 cookies是随HTTP事务一起被发送的，因此会浪费一部分带宽。
HTML5很好的提供了本地存储的功能，以键值对存储的解决方案，支持容量至少为4M，HTML5的web提供了两种客户端存储方式。
1.localStorage：是一种没有时间限制的数据存储方式，可以将数据永久保存在客户端。
sessionStorage：指的是针对一个session的数据存储，即将数据保存在session对象中，当关闭浏览器后，这些数据就被删除。
在使用web存储之前，应该先检查一下浏览器是否支持localStorage和sessionStorage(I7以下不支持)
判断方法
if(typeof(localStorage !==‘undefined‘){
};
或者if(window.localStorage){
}
web Storage支持的属性与方法
getItem(key):获取指定key所存储的value值
key(index)方法：返回列表中对应索引的key值
length属性：返回key/value队列的长度
removeItem(key)方法：从Storage中删除一个对应的键值对。
setItem(key,value)方法：将value存储到key指定的字段。
clear()方法：移除所有的内容
注意:设置，获取key/value的方法除了使用setItem()和getItem()方法以外，还分别提供了一个简单的方法：设置方法：sessionStorage.someKey = ‘someValue‘
获取方法：alert(sessionStorage.someKey);
下面一个例子来说明一下。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <link href="localstorage.css" type="text/css" rel="stylesheet"/> <script src="Storage.js" type="text/javascript"></script></head><body><input id="t1" type="text" /><button id ="add" >添加</button><button id =‘remove‘>删除</button><br/><textarea id="t2" readonly="readonly"></textarea></body></html>
css
#t2{ width:500px; height:400px; margin-top:10px;}
js
window.onload = function(){ var content = document.getElementById(‘t1‘); var btn1 = document.getElementById(‘add‘); var btn2 =document.getElementById(‘remove‘); btn1.addEventListener(‘click‘,SaveInfo); btn2.addEventListener(‘click‘,clearInfo); function SaveInfo(){ if(typeof localStorage !==‘undefined‘){ if(localStorage.storage){ localStorage.storage += content.value + ‘\n发表时间：‘+(new Date()).toDateString() +‘\n‘; }else{ localStorage.storage = content.value + ‘\n发表时间：‘+(new Date()).toDateString() +‘\n‘; } ShowInfo() }else { alert(‘无法存储!‘) } } function clearInfo(){ localStorage.removeItem(‘storage‘); ShowInfo() } function ShowInfo(){ var txt = document.getElementById(‘t2‘); if(localStorage.storage){ txt.value =localStorage.getItem(‘storage‘); }else{ txt.value =‘没有内容！‘ } }}
html5 localStorage讲解