<!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. Django中的session于cookie的用法

    1.cookies 1.django 中使用 cookies 1.设置cookies的值(将数据保存到客户端) 语法: 响应对象.set_cookie(key,value,expires) key:c ...

  2. Oracle中nvl()、instr()、及执行多条sql事务操作

    Oracle的Nvl函数 nvl( ) 函数 从两个表达式返回一个非null 值. 语法 NVL(eExpression1, eExpression2) 参数 eExpression1, eExpre ...

  3. 1111B - Average Superhero Gang Power

    刷数学题不知道为啥出来这个 算是贪心吧,先把所有的power加起来,然后sort一遍,每次删掉最小的那个数,记录一个max,平均值ave如果比max大,就替换,一定要小心m的值可能会比n小,意味着不一 ...

  4. Atcoder 1973：こだわり者いろはちゃん / Iroha's Obsession

    C - こだわり者いろはちゃん / Iroha's Obsession Time limit : 2sec / Memory limit : 256MB Score : 300 points Prob ...

  5. 算法训练 K好数 解析

    算法训练 K好数 时间限制:1.0s 内存限制:256.0MB 提交此题 锦囊1 锦囊2 问题描述 如果一个自然数N的K进制表示中任意的相邻的两位都不是相邻的数字,那么我们就说这个数是K好数.求L位K ...

  6. Hive错误：User root is not allowed to impersonate anonymous

    修改hadoop 配置文件 etc/hadoop/core-site.xml,加入如下配置项: <property> <name>hadoop.proxyuser.root.h ...

  7. 2017.4.9 函数式编程FP

    函数编程(简称FP)不只代指Haskell Scala等之类的语言,还表示一种编程范式,和面向对象的编程方式一样,是编程思维,软件思考方式,也称面向函数编程. 编程的本质是组合,组合的本质是范畴Cat ...

  8. qduoj LC的课后辅导

    描述 有一天,LC给我们出了一道题,如图: 这个图形从左到右由若干个 宽为1 高不确定 的小矩形构成,求出这个图形所包含的最大矩形面积. 输入 多组测试数据每组测试数据的第一行为n(0 <= n ...

  9. 堆栈详解 + 彻底理解Java的值传递和引用传递

    本文旨在用最通俗的语言讲述最枯燥的基本知识 学过Java基础的人都知道:值传递和引用传递是初次接触Java时的一个难点,有时候记得了语法却记不得怎么实际运用,有时候会的了运用却解释不出原理,而且坊间讨 ...

  10. java.lang.NoClassDefFoundError: org/apache/jute/CsvOutputArchive

    1. 问题 看到上面的错误 你怎么想? 包冲突?我这里不是.项目用到了zookeeper,这个类是zookeeper的核心包里的类. 控制台一直打印这个错误 但是项目不影响使用,奇怪! 2. 解决办法 ...