html5之使用web存储
2015-07-29 12:03
726 查看
1）使用本地存储（localStorage）:
通过全局属性localStorage访问本地存储功能，并会返回一个Storage对象，它被用来保存键/值形式的字符串对。
Storage对象的成员：
clear()——移除保存的键/值对；
getItem(<key>)——取得与指定键关联的值；
key(<index>)——取得指定索引的键；
length——返回已保存的键/值对数量；
removeItem(<key>)——移除指定键对应的键/值对；
setItem(<key>,<value>)——添加一个新的键/值对，如果键已使用就更新它的值；
[<key>]——用数组的访问形式取得与指定键关联的值；
监听存储事件：
某个文档对本地存储进行修改时会触发storage事件，同时指派的对象是一个StorageEvent对象，其成员有：
key——返回发生变化的键；
oldValue——返回关联此键的旧值；
newValue——返回关联此键的新值；
url——返回制造变化的文档URL;
storageArea——返回发生变化的Storage对象；
会话存储的工作方式和本地存储很接近，不同之处在于数据是各个浏览器上下文私有的，会在文档关闭时移除。
通过全局属性localStorage访问本地存储功能，并会返回一个Storage对象，它被用来保存键/值形式的字符串对。
Storage对象的成员：
clear()——移除保存的键/值对；
getItem(<key>)——取得与指定键关联的值；
key(<index>)——取得指定索引的键；
length——返回已保存的键/值对数量；
removeItem(<key>)——移除指定键对应的键/值对；
setItem(<key>,<value>)——添加一个新的键/值对，如果键已使用就更新它的值；
[<key>]——用数组的访问形式取得与指定键关联的值；
监听存储事件：
某个文档对本地存储进行修改时会触发storage事件，同时指派的对象是一个StorageEvent对象，其成员有：
key——返回发生变化的键；
oldValue——返回关联此键的旧值；
newValue——返回关联此键的新值；
url——返回制造变化的文档URL;
storageArea——返回发生变化的Storage对象；
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>上海远地资产管理有限公司</title>
<meta name="author" content="jason"/>
<meta name="description" content="上海远地资产管理有限公司（简称：远地资产），是一家专业的互联网金融服务平台."/>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
<style type="text/css">
body > *{
float:left;
}
table{
border-collapse: collapse;
margin-left: 50px;
}
th,td{
padding: 4px;
}
th{
text-align: right;
}
input{
border:thin solid black;
padding: 2px;
}
label{
min-width: 50px;
display: inline-block;
text-align: right;
}
#countmsg,#buttons{
margin-left: 50px;
margin-top:5px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div>
<div>
<label>Key:</label>
<input id="key" placeholder="Enter Key">
</div>
<div>
<label>Value:</label>
<input id="value" placeholder="Enter Value">
</div>
<div id="buttons">
<button id="add">Add</button>
<button id="clear">Clear</button>
</div>
<p id="countmsg">There are <span id="count"></span> items</p>
</div>
<table id="data" border="1">
<tr>
<th>Item Count:</th><td>-</td>
</tr>
</table>
<script>
displayData();
var buttons=document.getElementsByTagName("button");
for(var i=0;i<buttons.length;i++){
buttons[i].onclick=handleButtonPress;
}
function handleButtonPress(e){
switch(e.target.id){
case 'add':
var key=document.getElementById("key").value;
var value=document.getElementById("value").value;
localStorage.setItem(key,value);
break;
case 'clear':
localStorage.clear();
break;
}
displayData();
}
function displayData(){
var tableElem=document.getElementById("data");
tableElem.innerHTML="";
var itemCount=localStorage.length;
document.getElementById("count").innerHTML=itemCount;
for(var i=0;i<itemCount;i++){
var key=localStorage.key(i);
var val=localStorage[key];
tableElem.innerHTML+="<tr><th>"+key+":</th><td>"+val+"</td></tr>";
}
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{
border-collapse: collapse;
margin-left: 50px;
}
th,td{
padding: 4px;
}
</style>
</head>
<body>
<table id="data" border="1">
<tr>
<th>key</th>
<th>oldValue</th>
<th>newValue</th>
<th>url</th>
<th>storageArea</th>
</tr>
</table>
<script>
var tableElem=document.getElementById("data");
window.onstorage=handleStorage;
function handleStorage(e){
var row="<tr>";
row+="<td>"+ e.key+"</td>";
row+="<td>"+ e.oldValue+"</td>";
row+="<td>"+ e.newValue+"</td>";
row+="<td>"+ e.url+"</td>";
row+="<td>"+ (e.storageArea == localStorage)+"</td></tr>";
tableElem.innerHTML+=row;
}
</script>
</body>
</html>2）使用会话存储（sessionStorage）会话存储的工作方式和本地存储很接近，不同之处在于数据是各个浏览器上下文私有的，会在文档关闭时移除。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>上海远地资产管理有限公司</title>
<meta name="author" content="jason"/>
<meta name="description" content="上海远地资产管理有限公司（简称：远地资产），是一家专业的互联网金融服务平台."/>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
<style type="text/css">
body > *{
float:left;
}
table{
border-collapse: collapse;
margin-left: 50px;
}
th,td{
padding: 4px;
}
th{
text-align: right;
}
input{
border:thin solid black;
padding: 2px;
}
label{
min-width: 50px;
display: inline-block;
text-align: right;
}
#countmsg,#buttons {
margin-left: 50px;
margin-top: 5px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div>
<div>
<label>Key:</label>
<input id="key" placeholder="Enter Key">
</div>
<div>
<label>Value:</label>
<input id="value" placeholder="Enter Value">
</div>
<div id="buttons">
<button id="add">Add</button>
<button id="clear">Clear</button>
</div>
<p id="countmsg">There are <span id="count"></span> items</p>
</div>
<table id="data" border="1">
<tr>
<th>Item Count:</th><td>-</td>
</tr>
</table>
<script>
displayData();
var buttons=document.getElementsByTagName("button");
for(var i=0;i<buttons.length;i++){
buttons[i].onclick=handleButtonPress;
}
function handleButtonPress(e){
switch(e.target.id){
case 'add':
var key=document.getElementById("key").value;
var value=document.getElementById("value").value;
sessionStorage.setItem(key,value);
break;
case 'clear':
sessionStorage.clear();
break;
}
displayData();
}
function displayData(){
var tableElem=document.getElementById("data");
tableElem.innerHTML="";
var itemCount=sessionStorage.length;
document.getElementById("count").innerHTML=itemCount;
for(var i=0;i<itemCount;i++){
var key=sessionStorage.key(i);
var val=sessionStorage[key];
tableElem.innerHTML+="<tr><th>"+key+":</th><td>"+val+"</td></tr>";
}
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- html5的web存储与cookie的区别
- html5实现手机弹窗留言对话框
- html5+css3实现手机toast提示
- HTML5_焦点管理
- HTML5的新增方法
- HTML5_与类相关的扩展
- H5拍照上传经典案例
- html5做输入提示太简单了
- 移动开发中 HTML5 能否替代本地程序？
- h5学习之调用手机底层硬件----加速度传感器和震动
- HTML5表格的介绍与使用
- HTML5 Mobile Upload
- HTML5开发手机项目总结【很好】
- html5之使用地理定位
- HTML5+CSS3小结
- HTML5 新的API 窗口可视区 scrollIntoView dataset calssList
- HTML5简单进度环插件
- html5之canvas进阶
- RH5编译安装postfix
- 在HTML5的Canvas上绘制椭圆的几种方法(转)