软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
  软件世界网 -> Web前端 -> html5之使用web存储 -> 正文阅读
Web前端 最新文章
10分钟
SSM框架SSM项目源码SSM源码下载java框架整合
javascript入门
JavaScript常用对象Array(2)
8.Smarty3:模版中的内置函数
表单脚本
iTextSharp5.0页眉页脚及Asp.net预览的实现
MVC基础学习—理论篇
JavaScript
http协议中get与post区别详解

[Web前端]html5之使用web存储

  2015-07-30 15:16:00

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对象;
<!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>

版权声明:本文为博主原创文章,未经博主允许不得转载。
上一篇文章      下一篇文章      查看所有文章
2015-07-30 15:13:59  
360图书馆 论文大全 母婴/育儿 软件开发资料 网页快照 文字转语音 购物精选 软件 美食菜谱 新闻中心 电影下载 小游戏 Chinese Culture
生肖星座解梦 人民的名义 人民的名义在线看 三沣玩客 拍拍 视频 开发 Android开发 站长 古典小说 网文精选 搜图网 天下美图
中国文化英文 多播视频 装修知识库
2017-4-25 3:06:37
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --