localStorage 简单示例
HTML5 新增的JS API 都很实用,难能可贵的是它们都很接近自然语言的语法。
代码提示几乎就是它的文档了。
即使先前没有读过文档,单看代码提示就能明白它的各种方法如何使用了。
HTML:
<div class="inp">
</div>
<ol id="msgs">
</ol>
CSS:
.inp{ padding:10px;}
.inp input{ padding:3px;}
.inp input,.inp button{ margin-right:6px;}
.inp button{ width:48px; height:24px; vertical-align:middle; text-align:center;}
ol{ padding:10px;}
ol li{ position:relative; border-bottom:1px solid #ddd; padding:0 0 6px 0; font-weight:100; list-style:decimal-leading-zero;}
li p{ line-height:24px; font-size:14px; background:#f0f0f0; padding:0 5px;}
li time{ font-size:11px; text-align:right;}
JS:
var savebtn = document.querySelector('#save'),
input = document.querySelector('#txt'),
msgs = document.querySelector('#msgs');
var saveData = function(){
var data = input.value;
if(!data) return;
var t = '' +new Date;
window.localStorage.setItem(t,data);
var msg = [],itm = document.createElement('li');
msg.push('<p>'+ data + '</p><time>' + new Date(t) + '</time>' );
itm.innerHTML = msg.join('');
msgs.insertBefore(itm,msgs.firstChild);
};
var initData = function(){
var msg = [];
for(var i=0; i<window.localStorage.length; i++){
var t = localStorage.key(i),
v = localStorage.getItem(t);
msg.push('<li><p>'+ v + '</p><time>' + new Date(t) + '</time></li>' );
}
msgs.innerHTML = msg.join('');
};
var delData = function(){
//alert(window.localStorage.length)
if(window.confirm('您确定要删除本地存储信息么?')){
for(var i=0; i<window.localStorage.length; i++){
var key = localStorage.key(i);
localStorage.removeItem(key);
}
initData();
}
};
initData();
savebtn.addEventListener('click',saveData,false);
delbtn.addEventListener('click',delData,false);
转载于:https://www.cnblogs.com/trance/archive/2012/07/19/2599426.html
localStorage 简单示例相关推荐
- python文本处理实例_Python 文件处理的简单示例
这篇文章主要为大家详细介绍了Python 文件处理的简单示例,具有一定的参考价值,可以用来参考一下. 对python这个高级语言感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 相关的AP ...
- python获取mac、计算机id_python 获取本机IP、mac地址、计算机名的简单示例
这篇文章主要为大家详细介绍了python 获取本机IP.mac地址.计算机名的简单示例,具有一定的参考价值,可以用来参考一下. 对python获取本机IP.mac地址.计算机名感兴趣的小伙伴,下面一起 ...
- python简单单元测试示范卷_Python 单元测试的简单示例
这篇文章主要为大家详细介绍了Python 单元测试的简单示例,具有一定的参考价值,可以用来参考一下. 对python这个高级语言感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 以前我是不 ...
- python二分法求解_Python使用二分法求平方根的简单示例
这篇文章主要为大家详细介绍了Python使用二分法求平方根的简单示例,具有一定的参考价值,可以用来参考一下. 对python这个高级语言感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 使 ...
- Unity 简单示例代码和向导/Unity Aplication Block
Unity 简单示例代码和向导 关于Unity 的说明和下载地址,请访问[微软控制反转和依赖注入容器Unity 1.0发布] http://forum.entlib.com/Default.aspx? ...
- php定时刷新token,PHP 定时任务获取微信access_token的简单示例
搜索热词 感兴趣PHP 定时任务获取微信access_token的简单示例的小伙伴,下面一起跟随编程之家 jb51.cc的小编来看看吧. 最近开发微信公众平台,公众号调用各接口时都需使用access_ ...
- python 搭建的http 动态服务器_Python 创建HTTP服务器的简单示例
这篇文章主要为大家详细介绍了Python 创建HTTP服务器的简单示例,具有一定的参考价值,可以用来参考一下. 对python这个高级语言感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! ...
- python简单装饰器_python装饰器的简单示例
这篇文章主要为大家详细介绍了python装饰器的简单示例,具有一定的参考价值,可以用来参考一下. 对python这个高级语言感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 装饰器的语法以 ...
- javascript worker 多线程 简单示例
javascript worker 多线程 简单示例 项目结构 主线程 index.html <!DOCTYPE html> <html lang="en"> ...
最新文章
- 准确率可提升50%以上,Facebook用迁移学习改进代码自动补全
- html网页滚轮滑动页面,JQuery实现鼠标滚轮滑动到页面节点
- 比特币这么火热,看看这篇比特币初学者指南
- Qt与OpenCV编程:在QLabel加载的图像上画矩形并剪切
- ebs和java哪个前景好_EBS与实例存储的好处(反之亦然)[关闭]
- python类概念是什么_python中类的概念
- 数据预处理—4.为什么要趋近于正态分布?详解
- 眼压高学计算机行吗,为什么眼压高到降不下,医生却说没问题?
- DataGridView的DataGridViewComboBoxColumn列点击后触发其他方法
- npm安装项目所有依赖包
- mark制图软件_mac自带的画图工具在哪?如何使用苹果电脑自带的预览工具进行画图操作...
- 微信公众平台开发教程(十) 订阅号与服务号的区别
- 深度思考:到底什么是面向接口编程?
- pyodbc 测试连接 SQL Server 数据库
- Vue 3.0 Ref-sugar 提案到底是啥,真的是自寻死路吗?
- torchvision学习笔记之transforms
- [业务流程]JWT实现单点登录(SpringBoot + Vue +axious)
- 能量谷算法Energy Valley Optimizer (EVO)附matlab代码
- STM32的PDR_ON引脚,比较好的解释(转载+补充)
- 干电池电量采集_干电池电量的检测方法,干电池的常用保存方法
热门文章
- Bokeh 布局图像和工具
- vCenter Server Appliance 所需的端口
- 在一台物理服务器上搭建VSAN实验测试
- VMWare NSX安全生产和DMZ用例的详细设计指南
- 腾讯云认证考试常见问题答疑
- Java Web学习总结(8)——使用Cookie进行会话管理
- 计算机和口腔医学都不错的学校,人民日报推荐“各省”好大学,并非只有985/211,普本也有好大学...
- 简述导线平差计算的五个步骤_RTK技术导线测量和全站仪导线测量有什么区别?...
- 三校生计算机word基础知识,三校生计算机第一次月考计算机基础、word.doc
- Objective-C与JavaScript交互的那些事