首页
关于
友情链接
文章归档
Search
1
centos 32位 64位 下挂vagex一键包代码
719 阅读
2
wordpress转typecho方法
615 阅读
3
一个自制的virto精简版kvm qemu win2003模板 最低64M内存可用
605 阅读
4
PHP 安装
539 阅读
5
暴雨 车被泡了~
480 阅读
默认分类
vps综合利用
登录
/
注册
Search
标签搜索
Uncategorized
安装
mysql
utf-8
网站
google
linux
free
免费
黑色
ssl
一键包
优化
40%
press
vagex
32位
64位
debian
domain
御品VPS
累计撰写
501
篇文章
累计收到
1
条评论
首页
栏目
默认分类
vps综合利用
页面
关于
友情链接
文章归档
搜索到
126
篇与
御品VPS,独特的心情尽在御品VPS,VPS教程,VPS优惠,网络编程,PHP教程,PYthon教程,VPS综合利用,修身养性,修炼功法
的结果
2018-05-11
HTML5 Input 类型
HTML5 新的 Input 类型 HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。 本章全面介绍这些新的输入类型: color date datetime datetime-local email month number range search tel time url week 注意:并不是所有的主流浏览器都支持新的input类型,不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持,仍然可以显示为常规的文本域。 Input 类型: color color 类型用在input字段主要用于选取颜色,如下所示: 实例 从拾色器中选择一个颜色: 选择你喜欢的颜色: <input type="color" name="favcolor"> Input 类型: date date 类型允许你从一个日期选择器选择一个日期。 实例 定义一个时间控制器: 生日: <input type="date" name="bday"> Input 类型: datetime datetime 类型允许你选择一个日期(UTC 时间)。 实例 定义一个日期和时间控制器(本地时间): 生日 (日期和时间): <input type="datetime" name="bdaytime"> Input 类型: datetime-local datetime-local 类型允许你选择一个日期和时间 (无时区). 实例 定义一个日期和时间 (无时区): 生日 (日期和时间): <input type="datetime-local" name="bdaytime"> Input 类型: email email 类型用于应该包含 e-mail 地址的输入域。 实例 在提交表单时,会自动验证 email 域的值是否合法有效: E-mail: <input type="email" name="email"> 提示: iPhone 中的 Safari 浏览器支持 email 输入类型,并通过改变触摸屏键盘来配合它(添加 @ 和 .com 选项)。 Input 类型: month month 类型允许你选择一个月份。 实例 定义月与年 (无时区): 生日 (月和年): <input type="month" name="bdaymonth"> Input 类型: number number 类型用于应该包含数值的输入域。 您还能够设定对所接受的数字的限定: 实例 定义一个数值输入域(限定): 数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5"> 使用下面的属性来规定对数字类型的限定: 属性 描述 disabled 规定输入字段是禁用的 max 规定允许的最大值 maxlength 规定输入字段的最大字符长度 min 规定允许的最小值 pattern 规定用于验证输入字段的模式 readonly 规定输入字段的值无法修改 required 规定输入字段的值是必需的 size 规定输入字段中的可见字符数 step 规定输入字段的合法数字间隔 value 规定输入字段的默认值 尝试一下带有所有限定属性的例子 Input 类型: range range 类型用于应该包含一定范围内数字值的输入域。 range 类型显示为滑动条。 实例 定义一个不需要非常精确的数值(类似于滑块控制): <input type="range" name="points" min="1" max="10"> 请使用下面的属性来规定对数字类型的限定: max - 规定允许的最大值 min - 规定允许的最小值 step - 规定合法的数字间隔 value - 规定默认值 Input 类型: search search 类型用于搜索域,比如站点搜索或 Google 搜索。 实例 定义一个搜索字段 (类似站点搜索或者Google搜索): Search Google: <input type="search" name="googlesearch"> Input 类型: tel 实例 定义输入电话号码字段: 电话号码: <input type="tel" name="usrtel"> Input 类型: time time 类型允许你选择一个时间。 实例 定义可输入时间控制器(无时区): 选择时间: <input type="time" name="usr_time"> Input 类型: url url 类型用于应该包含 URL 地址的输入域。 在提交表单时,会自动验证 url 域的值。 实例 定义输入URL字段: 添加您的主页: <input type="url" name="homepage"> 提示: iPhone 中的 Safari 浏览器支持 url 输入类型,并通过改变触摸屏键盘来配合它(添加 .com 选项)。 Input 类型: week week 类型允许你选择周和年。 实例 定义周和年 (无时区): 选择周: <input type="week" name="week_year"> HTML5 <input> 标签 标签 描述 描述input输入器
2018年05月11日
156 阅读
0 评论
0 点赞
2018-05-11
HTML5 表单元素
HTML5 表单元素 HTML5 新的表单元素 HTML5 有以下新的表单元素: <datalist> <keygen> <output> 注意:不是所有的浏览器都支持HTML5 新的表单元素,但是你可以在使用它们,即使浏览器不支持表单属性,仍然可以显示为常规的表单元素。 HTML5 <datalist> 元素 <datalist> 元素规定输入域的选项列表。 <datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项: 使用 <input> 元素的列表属性与 <datalist> 元素绑定. 实例 <input> 元素使用<datalist>预定义值: <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> HTML5 <keygen> 元素 <keygen> 元素的作用是提供一种验证用户的可靠方法。 <keygen>标签规定用于表单的密钥对生成器字段。 当提交表单时,会生成两个键,一个是私钥,一个公钥。 私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。 实例 带有keygen字段的表单: <form action="demo_keygen.asp" method="get"> 用户名: <input type="text" name="usr_name"> 加密: <keygen name="security"> <input type="submit"> </form> HTML5 <output> 元素 <output> 元素用于不同类型的输出,比如计算或脚本输出: 实例 将计算结果显示在 <output> 元素: <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 + <input type="number" id="b" value="50">= <output name="x" for="a b"></output> </form> HTML5 新表单元素 标签 描述 <input>标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。 <keygen> 标签规定用于表单的密钥对生成器字段。 <output> 标签定义不同类型的输出,比如脚本的输出。
2018年05月11日
113 阅读
0 评论
0 点赞
2018-05-11
HTML5 表单属性
HTML5 表单属性 HTML5 新的表单属性 HTML5 的 <form> 和 <input>标签添加了几个新属性. <form>新属性: autocomplete novalidate <input>新属性: autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height 与 width list min 与 max multiple pattern (regexp) placeholder required step <form> / <input> autocomplete 属性 autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。 当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项。 提示: autocomplete 属性有可能在 form元素中是开启的,而在input元素中是关闭的。 注意: autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, datepickers, range 以及 color。 实例 HTML form 中开启 autocomplete (一个 input 字段关闭 autocomplete ): <form action="demo-form.php" autocomplete="on"> First name:<input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> E-mail: <input type="email" name="email" autocomplete="off"><br> <input type="submit"> </form> 提示:某些浏览器中,您可能需要启用自动完成功能,以使该属性生效。 <form> novalidate 属性 novalidate 属性是一个 boolean(布尔) 属性. novalidate 属性规定在提交表单时不应该验证 form 或 input 域。 实例 无需验证提交的表单数据 <form action="demo-form.php" novalidate> E-mail: <input type="email" name="user_email"> <input type="submit"> </form> <input> autofocus 属性 autofocus 属性是一个 boolean 属性. autofocus 属性规定在页面加载时,域自动地获得焦点。 实例 让 "First name" input 输入域在页面载入时自动聚焦: First name:<input type="text" name="fname" autofocus> <input> form 属性 form 属性规定输入域所属的一个或多个表单。 提示:如需引用一个以上的表单,请使用空格分隔的列表。 实例 位于form表单外的 input 字段引用了 HTML form (该 input 表单仍然属于form表单的一部分): <form action="demo-form.php" id="form1"> First name: <input type="text" name="fname"><br> <input type="submit" value="提交"> </form> Last name: <input type="text" name="lname" form="form1"> <input> formaction 属性 The formaction 属性用于描述表单提交的URL地址. The formaction 属性会覆盖<form> 元素中的action属性. 注意: The formaction 属性用于 type="submit" 和 type="image". 实例 以下HTMLform表单包含了两个不同地址的提交按钮: <form action="demo-form.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="提交"><br> <input type="submit" formaction="demo-admin.php" value="提交"> </form> <input> formenctype 属性 formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单) formenctype 属性覆盖 form 元素的 enctype 属性。 主要: 该属性与 type="submit" 和 type="image" 配合使用。 实例 第一个提交按钮已默认编码发送表单数据,第二个提交按钮以 "multipart/form-data" 编码格式发送表单数据: <form action="demo-post_enctype.php" method="post"> First name: <input type="text" name="fname"><br> <input type="submit" value="提交"> <input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交"> </form> <input> formmethod 属性 formmethod 属性定义了表单提交的方式。 formmethod 属性覆盖了 <form> 元素的 method 属性。 注意: 该属性可以与 type="submit" 和 type="image" 配合使用。 实例 重新定义表单提交方式实例: <form action="demo-form.php" method="get"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="提交"> <input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交"> </form> <input> formnovalidate 属性 novalidate 属性是一个 boolean 属性. novalidate属性描述了 <input> 元素在表单提交时无需被验证。 formnovalidate 属性会覆盖 <form> 元素的novalidate属性. 注意: formnovalidate 属性与type="submit一起使用 实例 两个提交按钮的表单(使用与不适用验证 ): <form action="demo-form.php"> E-mail: <input type="email" name="userid"><br> <input type="submit" value="提交"><br> <input type="submit" formnovalidate value="不验证提交"> </form> <input> formtarget 属性 formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。 The formtarget 属性覆盖 <form>元素的target属性. 注意: formtarget 属性与type="submit" 和 type="image"配合使用. 实例 两个提交按钮的表单, 在不同窗口中显示: <form action="demo-form.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="正常提交"> <input type="submit" formtarget="_blank" value="提交到一个新的页面上"> </form> <input> height 和 width 属性 height 和 width 属性规定用于 image 类型的 <input> 标签的图像高度和宽度。 注意: height 和 width 属性只适用于 image 类型的<input> 标签。 提示:图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度,图像所需的空间 在加载页时会被保留。如果没有这些属性, 浏览器不知道图像的大小,并不能预留 适当的空间。图片在加载过程中会使页面布局效果改变 (尽管图片已加载)。 实例 定义了一个图像提交按钮, 使用了 height 和 width 属性: <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"> <input> list 属性 list 属性规定输入域的 datalist。datalist 是输入域的选项列表。 实例 在 <datalist>中预定义 <input> 值: <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input> min 和 max 属性 min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定(约束)。 注意: min、max 和 step 属性适用于以下类型的 <input> 标签:date pickers、number 以及 range。 实例 <input> 元素最小值与最大值设置: Enter a date before 1980-01-01: <input type="date" name="bday" max="1979-12-31"> Enter a date after 2000-01-01: <input type="date" name="bday" min="2000-01-02"> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"> <input> multiple 属性 multiple 属性是一个 boolean 属性. multiple 属性规定<input> 元素中可选择多个值。 注意: multiple 属性适用于以下类型的 <input> 标签:email 和 file: 实例 上传多个文件: Select images: <input type="file" name="img" multiple> <input> pattern 属性 pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。 注意:pattern 属性适用于以下类型的 <input> 标签: text, search, url, tel, email, 和 password. 提示: 是用来全局 属性描述了模式. 提示: 您可以在我们的 中学习到有关正则表达式的内容 实例 下面的例子显示了一个只能包含三个字母的文本域(不含数字及特殊字符): Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"> <input> placeholder 属性 placeholder 属性提供一种提示(hint),描述输入域所期待的值。 简短的提示在用户输入值前会显示在输入域上。 注意: placeholder 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email 以及 password。 实例 input 字段提示文本t: <input type="text" name="fname" placeholder="First name"> <input> required 属性 required 属性是一个 boolean 属性. required 属性规定必须在提交之前填写输入域(不能为空)。 注意:required 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。 实例 不能为空的input字段: Username: <input type="text" name="usrname" required> <input> step 属性 step 属性为输入域规定合法的数字间隔。 如果 step="3",则合法的数是 -3,0,3,6 等 提示: step 属性可以与 max 和 min 属性创建一个区域值. 注意: step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week. 实例 规定input step步长为3: <input type="number" name="points" step="3"> HTML5 <input> 标签 标签 描述 定义一个form表单 定义一个 input 域
2018年05月11日
138 阅读
0 评论
0 点赞
2018-05-11
HTML5 语义元素
HTML5 语义元素 语义= 意义 语义元素 = 有意义的元素 什么是语义元素? 一个语义元素能够清楚的描述其意义给浏览器和开发者。 无语义 元素实例: <div> 和 <span> - 无需考虑内容. 语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容. 浏览器支持 Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持语义元素。 注意: Internet Explorer 8 及更早版本不支持该元素。 但是文章底部提供了兼容的解决方法. HTML5中新的语义元素 许多现有网站都包含以下HTML代码: <div id="nav">, <div class="header">, 或者 <div id="footer">, 来指明导航链接, 头部, 以及尾部. HTML5 提供了新的语义元素来明确一个Web页面的不同部分: <header> <nav> <section> <article> <aside> <figcaption> <figure> <footer> HTML5 <section> 元素 <section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。 根据W3C HTML5文档: section 包含了一组内容及其标题。 实例 <section> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is....</p> </section> HTML5 <article> 元素 <article> 标签定义独立的内容。. <article> 元素使用实例: Forum post Blog post News story Comment 实例 <article> <h1>Internet Explorer 9</h1> <p>Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。</p> </article> HTML5 <nav> 元素 <nav> 标签定义导航链接的部分。 <nav> 元素用于定义页面的导航链接部分区域,但是,不是所有的链接都需要包含在 <nav> 元素中! 实例 <nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav> HTML5 <aside> 元素 <aside> 标签定义页面主区域内容之外的内容(比如侧边栏)。 aside 标签的内容应与主区域的内容相关. 实例 <p>My family and I visited The Epcot center this summer.</p> <aside> <h4>Epcot Center</h4> <p>The Epcot Center is a theme park in Disney World, Florida.</p> </aside> HTML5 <header> 元素 <header>元素描述了文档的头部区域 <header>元素主要用于定义内容的介绍展示区域. 在页面中你可以使用多个<header> 元素. 以下实例定义了文章的头部: 实例 <article> <header> <h1>Internet Explorer 9</h1> <p><time pubdate datetime="2011-03-15"></time></p> </header> <p>Windows Internet Explorer 9(缩写为 IE9 )是在2011年3月14日21:00发布的</p> </article> HTML5 <footer> 元素 <footer> 元素描述了文档的底部区域. <footer> 元素应该包含它的包含元素 一个页脚通常包含文档的作者,著作权信息,链接的使用条款,联系信息等 文档中你可以使用多个 <footer>元素. 实例 <footer> <p>Posted by: Hege Refsnes</p> <p><time pubdate datetime="2012-03-01"></time></p> </footer> HTML5 <figure> 和 <figcaption> 元素 <figure>标签规定独立的流内容(图像、图表、照片、代码等等)。 <figure> 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。 <figcaption> 标签定义 <figure> 元素的标题. <figcaption>元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。 实例 <figure> <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption> </figure> 我们可以开始使用这些语义元素吗? 以上的元素都是块元素(除了<figcaption>). 为了让这些块及元素在所有版本的浏览器中生效,你需要在样式表文件中设置一下属性 (以下样式代码可以让旧版本浏览器支持本章介绍的块级元素): header, section, footer, aside, nav, article, figure { display: block; } Internet Explorer 8 及更早IE版本中的问题 IE8 及更早IE版本无法在这些元素中渲染CSS效果,以至于你不能使用 <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, 或者其他的HTML5 elements. 解决办法: 你可以使用HTML5 Shiv Javascript脚本来解决IE的兼容问题。HTML5 Shiv下载地址: 下载后,将以下代码放入到网页中: <!--[if lt IE 9]><script src="html5shiv.js"></script> <![endif]--> 以上代码在浏览器小于IE9版本时会加载html5shiv.js文件. 你必须将其放置于<head> 元素中,因为 IE浏览器需要在头部加载后渲染这些HTML5的新元素
2018年05月11日
130 阅读
0 评论
0 点赞
2018-05-11
HTML5 Web 存储
HTML5 Web 存储 HTML5 web 存储,一个比cookie更好的本地存储方式。 什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据。 早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能. 数据以 键/值 对存在, web网页的数据只允许该网页访问使用。 浏览器支持 Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储。 注意: Internet Explorer 7 及更早IE版本不支持web 存储. localStorage 和 sessionStorage 客户端存储数据的两个对象为: localStorage - 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。 sessionStorage - 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。 在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage: if(typeof(Storage)!=="undefined") { // 是的! 支持 localStorage sessionStorage 对象! // 一些代码..... } else { // 抱歉! 不支持 web 存储。 } localStorage 对象 localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。 实例 localStorage.sitename="菜鸟教程"; document.getElementById("result").innerHTML="网站名:" + localStorage.sitename; 实例解析: 使用 key="sitename" 和 value="菜鸟教程" 创建一个 localStorage 键/值对。 检索键值为"sitename" 的值然后将数据插入 id="result"的元素中。 以上实例也可以这么写: // 存储 localStorage.sitename = "菜鸟教程"; // 查找 document.getElementById("result").innerHTML = localStorage.sitename; 移除 localStorage 中的 "lastname" : localStorage.removeItem("lastname"); 不管是 localStorage,还是 sessionStorage,可使用的API都相同,常用的有如下几个(以localStorage为例): 保存数据:localStorage.setItem(key,value); 读取数据:localStorage.getItem(key); 删除单个数据:localStorage.removeItem(key); 删除所有数据:localStorage.clear(); 得到某个索引的key:localStorage.key(index); 提示: 键/值对通常以字符串存储,你可以按自己的需要转换该格式。 下面的实例展示了用户点击按钮的次数。 代码中的字符串值转换为数字类型: 实例 if (localStorage.clickcount) { localStorage.clickcount=Number(localStorage.clickcount)+1; } else { localStorage.clickcount=1; } document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 "; sessionStorage 对象 sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。 如何创建并访问一个 sessionStorage: 实例 if (sessionStorage.clickcount) { sessionStorage.clickcount=Number(sessionStorage.clickcount)+1; } else { sessionStorage.clickcount=1; } document.getElementById("result").innerHTML="在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 "; Web Storage 开发一个简单的网站列表程序 网站列表程序实现以下功能: 可以输入网站名,网址,以网站名作为key存入localStorage; 根据网站名,查找网址; 列出当前已保存的所有网站; 以下代码用于保存于查找数据: save() 与 find() 方法 //保存数据 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 sitename = localStorage.getItem(search_site); var find_result = document.getElementById("find_result"); find_result.innerHTML = search_site + "的网址是:" + sitename; } 完整实例演示如下: 实例 <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_site">输入网站名:</label> <input type="text" id="search_site" name="search_site"/> <input type="button" onclick="find()" value="查找网站"/> <p id="find_result"><br/></p> </div> 实现效果截图: 以上实例只是演示了简单的 localStorage 存储与查找,更多情况下我们存储的数据会更复杂。 接下来我们将使用 来存储对象数据, 可以将对象转换为字符串。 var site = new Object; ... var str = JSON.stringify(site); // 将对象转换为字符串 之后我们使用 方法将字符串转换为 JSON 对象: var site = JSON.parse(str); JavaScript 实现代码: save() 与 find() 方法 //保存数据 function save(){ var site = new Object; site.keyname = document.getElementById("keyname").value; site.sitename = document.getElementById("sitename").value; site.siteurl = document.getElementById("siteurl").value; var str = JSON.stringify(site); // 将对象转换为字符串 localStorage.setItem(site.keyname,str); alert("保存成功"); } //查找数据 function find(){ var search_site = document.getElementById("search_site").value; var str = localStorage.getItem(search_site); var find_result = document.getElementById("find_result"); var site = JSON.parse(str); find_result.innerHTML = search_site + "的网站名是:" + site.sitename + ",网址是:" + site.siteurl; } 完整实例如下: 实例 <div style="border: 2px dashed #ccc;width:320px;text-align:center;"> <label for="keyname">别名(key):</label> <input type="text" id="keyname" name="keyname" class="text"/> <br/> <label for="sitename">网站名:</label> <input type="text" id="sitename" name="sitename" class="text"/> <br/> <label for="siteurl">网 址:</label> <input type="text" id="siteurl" name="siteurl"/> <br/> <input type="button" onclick="save()" value="新增记录"/> <hr/> <label for="search_site">输入别名(key):</label> <input type="text" id="search_site" name="search_site"/> <input type="button" onclick="find()" value="查找网站"/> <p id="find_result"><br/></p> </div> 实例中的 loadAll 输出了所有存储的数据,你需要确保 localStorage 存储的数据都为 JSON 格式,否则 JSON.parse(str) 将会报错。 输出结果演示:
2018年05月11日
142 阅读
0 评论
0 点赞
1
2
3
4
...
26