HTML5 本地存储+layer弹层组件制作记事本
什么是 HTML5 Web 存储?
使用HTML5可以在本地存储用户的浏览数据。
早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.
数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
- 保存数据：localStorage.setItem(key,value);
- 读取数据：localStorage.getItem(key);
- 删除单个数据：localStorage.removeItem(key);
- 删除所有数据：localStorage.clear();
- 得到某个索引的key：localStorage.key(index);
了解了本地存储接下来我们利用html5的本地存储制作一个记事本功能，我们还需要到layer官网下载layer组件
具体代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>记事本</title>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="layer/layer.js"></script>
</head>
<body>
<div>
<button type="button" onclick="notepad()">记事本</button>
</div> <script>
// 记事本
function notepad(){
if(typeof(Storage) !== "undefined"){ // Check browser support
var local = window.localStorage,
data = local.getItem("memoData"); // 读取本地存储的信息
layer.prompt({
title: '记事本',
formType: 2,
value: data,
area: ['500px', '400px'] // 自定义文本域宽高
}, function(text, index){
layer.close(index);
if(data != text){
local.removeItem("memoData"); // 删除本地存储的信息
local.setItem("memoData", text); // 存储数据信息到本地
}
});
}else{
layer.msg("抱歉！您的浏览器不支持 Web Storage ...");
}
}
</script>
</body>
</html>
HTML5 本地存储+layer弹层组件制作记事本的更多相关文章
- 学习layer弹层组件移动版
layer弹层组件官网 常用参数: shadeClose:默认true,是否点击遮罩时关闭层
- jQuery Layer 弹层组件
layer是一款近年来口碑非常不错的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 在与同类组件的比较中,layer总是能轻易获胜.她 ...
- Layer弹层组件 二次扩展，项目中直接使用。
/************************ Layer扩展 ****************************/ /* * Layer弹出Alert提示框 * @param messag ...
- 弹层组件-layer
layer是Layui的一个弹层组建,功能强大,总之我很喜欢,下面介绍这个组件的基本用法. 首先如果只需要使用layer而不想使用Layui可以单独下载layer组件包,页面引入jquery1.8以上 ...
- HTML5本地存储(Local Storage) 的前世今生
长久以来本地存储能力一直是桌面应用区别于Web应用的一个主要优势.对于桌面应用(或者原生应用),操作系统一般都提供了一个抽象层用来帮助应用程序保存其本地数据 例如(用户配置信息或者运行时状态等). 常 ...
- HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...
- (转)HTML5 本地存储
原文:http://www.cnblogs.com/rainman/archive/2011/06/22/2086069.html HTML5 本地存储 1.sessionStorage 2.loca ...
- layerweb弹层组件（SSH框架下）
action类 这里主要看业务方法中表单路径中的(isClose = "1";return resUri;) public class MaterialsAction extend ...
- HTML5 本地存储的用法
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...
随机推荐
- Documentation/kobject.txt翻译--sysfs
你从未想过的关于kobjects,ksets和ktypes的一切:作者:Greg Kroah-Hartman <gregkh@linuxfoundation.org>:上次更新时间:200 ...
- Loararunner录制脚本
LoadRunner录制 1.启动LoadRunner,用管理员方式打开,选择 “Create/Edit Scripts” 2.从这两个方式任意方式打开脚本页面 3.选择协议,这里我们举例子,用“We ...
- TVS 选型
TVS 选型 主要用于 IO 保护 TVS 的电压不要小于正常工作的电压,不然会影响正常工作. ESD 的电压很高,但是时间很短. TVS 有节电容,用于高速线路时要注意. 有双向的,也有单向的,还有 ...
- Linux环境kafka安装
一. 安装包下载地址 https://www.apache.org/dyn/closer.cgi?path=/kafka/2.0.0/kafka_2.12-2.0.0.tgz 注:下载kafka时有S ...
- c# .net 编程方式修改环境变量无效的解决办法
无论是修改注册表方式(System\ControlSet001\Control\Session Manager\Environment"),还是用Environment.SetEnviron ...
- linux Posix 信号量 三 （经典例子）
本文将阐述一下信号量的作用及经典例子,当中包括“<越狱>寄信”,“家庭吃水果”,“五子棋”,“接力赛跑”,“读者写者”,“四方恋爱”等 首先,讲 semWait操作(P操作)和semSig ...
- 使用Fiddler实现网络限速
Fiddler实现网络限速方法: 1.点击FiddlerScript 2.在脚本里相应的地方添加“2”处两行代码(不加注释),保存(Save Script) 第一行为请求延时3秒,第二行为响应延时1. ...
- hadoop学习day3 mapreduce笔记
1.对于要处理的文件集合会根据设定大小将文件分块,每个文件分成多块,不是把所有文件合并再根据大小分块,每个文件的最后一块都可能比设定的大小要小 块大小128m a.txt 120m 1个块 b.txt ...
- 263. Ugly Number + 264. Ugly Number II + 313. Super Ugly Number
▶ 三个与丑数相关的问题 ▶ 第 263题,判定一个数字是否是丑数,即其素因子是否仅由 2,3,5 构成. ● 常规消除判别,4 ms class Solution { public: bool is ...
- 37.使用PreResultListener实现回调
转自:https://wenku.baidu.com/view/84fa86ae360cba1aa911da02.html 在进行本实例前请前复习:五.2自定义拦截器.因为PreResultListe ...