<!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. Python之路，第十一篇：Python入门与基础11

    python3  函数2 全局变量:一直存在 局部变量:函数执行时存在,执行完毕后销毁: lambda 表达式(又称匿名函数表达式) 作用: 创建一个匿名(无名)函数对象, 同 def 类似但不提供函 ...

  2. 利用selenium模拟登录webqq

    from selenium import webdriver import selenium.webdriver.support.ui as ui import time opt = webdrive ...

  3. urllib.request中Handler处理器

    1.定义 自定义的urlopen()方法,urlopen()方法是一个特殊的opener(模块已定义好),不支持代理等功能,通过Handler处理器对象来自定义opener对象 2.常用方法 1.bu ...

  4. POJ3070 Fibonacci（矩阵快速幂加速递推）【模板题】

    题目链接:传送门 题目大意: 求斐波那契数列第n项F(n). (F(0) = 0, F(1) = 1, 0 ≤ n ≤ 109) 思路: 用矩阵乘法加速递推. 算法竞赛进阶指南的模板: #includ ...

  5. tomcat:利用tomcat部署war包格式的项目

    配置jdk环境变量, 配置TOMCAT_HOME 变量, 将war包放入webapps中. 运行tomcar-bin文件夹中的startup.bat. tomcat会自动解压war包. 进入项目:

  6. Brute Force Sorting(HDU6215)

    题意:给你长度为n的数组,定义已经排列过的串为:相邻两项a[i],a[i+1],满足a[i]<=a[i+1].我们每次对当前数组删除非排序过的串,合并剩下的串,继续删,直到排序完成. 题解:用双 ...

  7. 2017.4.28 KVM 内存虚拟化及其实现

    概述 KVM(Kernel Virtual Machine) , 作为开源的内核虚拟机,越来越受到 IBM,Redhat,HP,Intel 等各大公司的大力支持,基于 KVM 的开源虚拟化生态系统也日 ...

  8. 一天掌握python爬虫

    一天掌握python爬虫日记: (小爬虫,NO 我们是大蜘蛛 ) 数据抓取: requests:requests 的底层实现其实就是 urllib开源地址:https://github.com/ken ...

  9. linux----CenterOS7中在线安装jdk

    summary: 一直以来,都在windows上玩java,今天是一个具有里程碑的一天,感觉正式踏入进入了linux大门. 原来一直以为在linux上安装jdk,需要去官网下载适合linux的jdk, ...

  10. 转载 React.createClass 对决 extends React.Component

    先给出结论,这其实是殊途同归的两种方式.过去我们一般都会使用 React.createClass 方法来创建组件,但基于 ES6 的小小语法糖,我们还可以通过 extends React.Compon ...