html5本地存储的记事本代码,HTML5 本地存储+layer弹层组件制作记事本-CSDN博客

什么是 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组件

具体代码如下：

记事本

// 记事本

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 ...");

}

学习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 ...

随机推荐

add-two-numbers

leetcode开篇~ 问题描述: You are given two linked lists representing two non-negative numbers. The digits a ...

Python黑帽编程2&period;9 面向对象编程

Python黑帽编程2.9 面向对象编程我个人认为,计算机语言的发展,有两个方向,一个是从低到高的发展过程,在这个过程中,语言的思考和解决问题的方式是面向硬件的.硬件本质上处理的是信号,在此基础上, ...

利用selector设置ImageButton不同状态下的背景图片

1.自定义MyButton类 public class MyButton extends Button { //This constructormust be public MyButton(Cont ...

Maven系列一pom&period;xml 配置详解