<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>HTML5本地存储之Web Storage篇</title>

</head>

<body>

    <div style="border: 2px dashed #ccc;width:320px;text-align:center;">

        <label for="sitename">网站名(key)：</label>

        <input type="text" id="sitename" name="sitename" class="text"/>

        <br/>

        <label for="siteurl">网 址(value)：</label>

        <input type="text" id="siteurl" name="siteurl"/>

        <br/>

        <input type="button" onclick="save()" value="新增记录"/>

        <hr/>

        <label for="search_phone">输入网站名：</label>

        <input type="text" id="search_site" name="search_site"/>

        <input type="button" onclick="find()" value="查找网站"/>

        <p id="find_result"><br/></p>

    </div>

    <br/>

    <div id="list">

    </div>

    <script>

    // 载入所有存储在localStorage的数据

    loadAll();   //这一步很重要,保持网页刷新数据依然存在. 

    //保存数据

    function save(){

        var siteurl = document.getElementById("siteurl").value;

        var sitename = document.getElementById("sitename").value;

        localStorage.setItem(sitename, siteurl);

        alert("添加成功");

    }

    //查找数据

    function find(){

        var search_site = document.getElementById("search_site").value;

        var siteurl = localStorage.getItem(search_site);

        var find_result = document.getElementById("find_result");

        find_result.innerHTML = search_site + "的网址是：" + siteurl;

    }

    //将所有存储在localStorage中的对象提取出来，并展现到界面上

    function loadAll(){

        var list = document.getElementById("list");

        if(localStorage.length>0){

            var result = "<table border='1'>";

            result += "<tr><td>key</td><td>value</td></tr>";

            for(var i=0;i<localStorage.length;i++){

                var sitename = localStorage.key(i);

                var siteurl = localStorage.getItem(sitename);

                result += "<tr><td>"+sitename+"</td><td>"+siteurl+"</td></tr>";

            }

            result += "</table>";

            list.innerHTML = result;

        }else{

            list.innerHTML = "数据为空……";

        }

    }

    </script>

</body>

</html>

HTML5本地存储之Web Storage实例篇,最有用的是localStorage的更多相关文章

  1. 利用HTML5开发Android(4)---HTML5本地存储之Web Storage

    Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto ...

  2. HTML5本地存储之Web Storage应用介绍

    Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto ...

  3. HTML5 本地存储（Web Storage）

    HTML5 提供了两种在客户端存储数据的新方法: localStorage - 本地永久存储,下次打开浏览器数据依然存在 sessionStorage - 只存在于一个会话的数据存储,关闭浏览器数据会 ...

  4. 利用HTML5开发Android(7)---HTML5本地存储之Database Storage

    在上一篇<HTML5本地存储之Web Storage篇>中,简单介绍了如何利用localStorage实现本地存储:实际上,除了sessionStorage和localStorage外,H ...

  5. HTML5本地存储 Web Storage

    Web Storage基本介绍 HTML5 定义了本地存储规范 Web Storage , 提供了两种存储类型 API  sessionStorage 和 localStorage,二者的差异主要是数 ...

  6. HTML5本地存储——Web SQL Database

    在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...

  7. [转]HTML5本地存储——Web SQL Database

    在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...

  8. HTML5本地存储——Web SQL Database与indexedDB

    虽然在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数 ...

  9. HTML5 本地存储Web Storage简单了解

    ​HTML5本地存储规范,定义了两个重要的API :Web Storage  和  本地数据库Web SQL Database. 本地存储Web Storage 实际上是HTML4的cookie存储机 ...

随机推荐

  1. OTG作为大容量设备

    /********************************************************************************* * OTG作为大容量设备 * 说明 ...

  2. JavaBasic_07

    面向对象三大特征 1.封装 封装是一种信息隐藏技术 a.是指数据和基于数据的操作封装在一起,数据被保护在内部(类的内部(对象)) b.系统的其他部分只有通过在数据外面的被授权的操作才能进行交互(没有授 ...

  3. cvtColor()学习

    CvtColor Void cv::cvtColor(InputArray src, OutputArray dst, INT code, INT dstCn = ) 将图像从一个颜色空间转换为另一个 ...

  4. 【Wannafly挑战赛22A计数器】【裴蜀定理】

    https://www.nowcoder.com/acm/contest/160/A 题目描述 有一个计数器,计数器的初始值为0,每次操作你可以把计数器的值加上a1,a2,...,an中的任意一个整数 ...

  5. LNMP环境包安装IonCube教程

    ioncube是业内优秀的php加密解密解决方案.和zend guard相比,ioncube具有如下优势: 1. 安全:zend guard的版本不是非常安全,网络上有破解使用zend,下面我们来看I ...

  6. python数据类型及字符编码

    一.python数据类型,按特征划分 1.数字类型 整型:布尔型(True,False).长整型(L),会自动帮你转换成长整型.标准整型 2.序列类型 字符串(str).元组(tuple).列表(li ...

  7. LG4196 [CQOI2006]凸多边形

    题意 题目描述 逆时针给出n个凸多边形的顶点坐标,求它们交的面积.例如n=2时,两个凸多边形如下图: 则相交部分的面积为5.233. 输入输出格式 输入格式: 第一行有一个整数n,表示凸多边形的个数, ...

  8. 浮动IP(Floating IPs)：开始构建你的高可用性的应用

    高可用性是所有生产环境的关键.开发者因此可以高枕无忧因为他们知道他们的应用被设计为可以承受住故障. 今天,我们非常激动的宣布我们应用了浮动IP技术.浮动IP指的是一个IP地址可以立即从一个Drople ...

  9. linux怎么不输入路径直接运行程序脚本

    有时候我们会遇到一些程序压缩包,已解压无需安装就可以直接运行的那种,例如sendemail,就是直接把程序压缩包下载下来,解压后直接跑sendemail那个脚本就可以实现发送邮件功能 其实很简单,只需 ...

  10. MySQL Binlog和Relaylog生成和清理

    =====================================================================================binlog文件生成:在每条二 ...