<!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. 【转载】 强化学习(五)用时序差分法(TD)求解

    原文地址: https://www.cnblogs.com/pinard/p/9529828.html ------------------------------------------------ ...

  2. 【Java】身份证号码验证

    代码引用自:https://gitee.com/appleat/codes/ynrtqujv0wfgesm8ia9b547 package xxx; /** * Created by wdj on 2 ...

  3. 最长公共子序列与最长公共字串 (dp)转载http://blog.csdn.net/u012102306/article/details/53184446

    1. 问题描述 子串应该比较好理解,至于什么是子序列,这里给出一个例子:有两个母串 cnblogs belong 比如序列bo, bg, lg在母串cnblogs与belong中都出现过并且出现顺序与 ...

  4. HPU第四次积分赛-K :方框(水题,打印图形)

    方框 描述 用'*'打印出一个nxn的字符图形(1<=n<=100). 输入 多组输入.每行输入一个n,输入EOF结束文件. 输出 输出一个满足题意的图形. 输入样例 1  1 2 5 6 ...

  5. 回收机制GC

    .NET 之 垃圾回收机制GC 一.GC的必要性 1.应用程序对资源操作,通常简单分为以下几个步骤:为对应的资源分配内存 → 初始化内存 → 使用资源 → 清理资源 → 释放内存. 2.应用程序对资源 ...

  6. java-Arrays类

    1.Arrays类概述: - 针对数组进行操作的工具类. - 提供了排序,查找等功能. 2.成员方法: - 转换成字符串:public static String toString(int[] a)  ...

  7. pycharm汉化 (ubuntu版)

    终端依次输入 cd  /tmp git clone https://github.com/ewen0930/PyCharm-Chinese cd Pycharm-Chinese bash packag ...

  8. 【mybatis源码学习】mybtias知识点

    Mybatis技术内幕系列博客,从原理和源码角度,介绍了其内部实现细节,无论是写的好与不好,我确实是用心写了,由于并不是介绍如何使用Mybatis的文章,所以,一些参数使用细节略掉了,我们的目标是介绍 ...

  9. Java(命令行)打印库存清单

    public class demo{ public static void main(String[] args){ //1 顶部 System.out.println("--------- ...

  10. Stream Processing 101: From SQL to Streaming SQL in 10 Minutes

    转自:https://wso2.com/library/articles/2018/02/stream-processing-101-from-sql-to-streaming-sql-in-ten- ...