<!doctype html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         #btn{width:100px;height:100px;background: #00f;}

         #btn2{width:100px;height:100px;background: #00f;-webkit-transition: all 1s}

         #btn.action{background: #0f0;-webkit-transition: all 1s}

     </style>

 </head>

 <body>

 <input type="text" value=""/>

 <input type="text" value=""/>

 <input type="text" value=""/>

 <input type="text" value=""/>

 <div id="btn">存储成功</div>

 <div id="btn2">存储成功</div>

 <script>

 //    alert(window.localStorage);

 document.getElementById("btn").addEventListener("webkitTransitionEnd",function(){

     document.getElementById("btn").className = "";

 },false);

 document.getElementById("btn").addEventListener("click",function(){

     document.getElementById("btn").className = "action";

     var a1 = document.getElementsByTagName("input")[0].value;

     var a2 = document.getElementsByTagName("input")[1].value;

     var a3 = document.getElementsByTagName("input")[2].value;

     var a4 = document.getElementsByTagName("input")[3].value;

     arr = [

         a1,a2,a3,a4

     ];

     localStorage.setItem("a",arr);

 },false);

     var stordata = localStorage.getItem('a');

 //    alert(stordata);

     var arr2 = stordata.split(",");

     arr2.forEach(function(element,index){

 //        alert(element);

 //        alert(index);

         document.getElementsByTagName("input")[index].value = element;

     })

 document.getElementById("btn2").onclick = function() {

 //    localStorage.clear();

     localStorage.removeItem('a');

 }

 </script>

 </body>

 </html>

HTML本地存储，localstorg的应用实例的更多相关文章

  1. HTML5本地存储之Web Storage实例篇,最有用的是localStorage

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. HTML5 学习总结（三）——本地存储

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  3. HTML5本地存储——IndexedDB（一：基本使用）

    在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...

  4. .Net简单图片系统-本地存储和分布式存储

    本地存储 所谓本地存储就是将上传图片保存到图片服务器的本地磁盘上. if (ConfigHelper.GetConfigString("SaveMode") == "Lo ...

  5. JS操作cookie以及本地存储（sessionStorage 和 localStorage ）

    JS操作cookie cookie的操作用两种方式 1.substring //创建cookie function setCookie(name,value,expires,path,domain,s ...

  6. objective-c ios webkit 本地存储local-storage

    我有一个Cocoa / Objective-C的应用程序,它嵌入了一个WebKit的web视图.我需要打开的数据库支持和本地存储.我知道这是可以做到-我有它在Safari中工作-但我无法找到如何设置这 ...

  7. .NET：线程本地存储、调用上下文、逻辑调用上下文

    .NET:线程本地存储.调用上下文.逻辑调用上下文 目录 背景线程本地存储调用上下文逻辑调用上下文备注 背景返回目录 在多线程环境,如果需要将实例的生命周期控制在某个操作的执行期间,该如何设计?经典的 ...

  8. web本地存储

    Web本地存储 通过本地存储(Local Storage),web 应用程序能够在用户浏览器中对数据进行本地的存储. 在 HTML5 之前,应用程序数据只能存储在 cookie 中,包括每个服务器请求 ...

  9. scrapy爬取数据进行数据库存储和本地存储

    今天记录下scrapy将数据存储到本地和数据库中,不是不会写,因为小编每次都写觉得都一样,所以记录下,以后直接用就可以了-^o^- 1．本地存储 设置pipel ines.py class Ak17P ...

  10. 前端笔记之HTML5&CSS3（上）新特性&音频视频&本地存储&自定义属性

    一.HTML5简介 HTML 5 的第一份正式草案已于2008年1月22日公布.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 2014年10月29日,万维网联盟 ...

随机推荐

  1. 第6章 堆排序，d叉堆，优先队列

    #include<stdio.h> #include<stdlib.h> #include<string.h> #define leftChild(i) (2*(i ...

  2. CDC不同模式在ODI体现系列之二 异步模式

    CDC不同模式在ODI体现系列之二 异步模式 2 异步模式需要在数据库中做一些准备工作: 改数据为归档并启用logminer: SQL> shutdown immediate 数据库已经关闭. ...

  3. delphi新语法之泛型实现的对象池模板

    现在的DELPHI因为支持泛型的语法,所以也能支持模板编程了.   // 标准模板 unit UntPools;   interface   uses   Classes, SysUtils, Unt ...

  4. mongodb的 或 查询，实践总结

    PostcardRecord.findOne({user:userid, $or : [ { at:{$gte:start.valueOf(), $lte:end.valueOf()} } , { i ...

  5. poj 1149 PIGS（最大流经典构图）

    题目描述:迈克在一个养猪场工作,养猪场里有M 个猪圈,每个猪圈都上了锁.由于迈克没有钥匙,所以他不能打开任何一个猪圈.要买猪的顾客一个接一个来到养猪场,每个顾客有一些猪圈的钥匙,而且他们要买一定数量的 ...

  6. 20140613_JavaWeb学习之开发环境配置篇

    本文所使用软件百度云盘网址:http://pan.baidu.com/s/1kTDRFwz 1安装JDK 操作系统:windows7-64bit 版本号:jdk-7u51-windows-x64 安装 ...

  7. 设计模式之PHP项目应用——单例模式设计Memcache和Redis操作类

    1 单例模式简单介绍 单例模式是一种经常使用的软件设计模式. 在它的核心结构中仅仅包括一个被称为单例类的特殊类. 通过单例模式能够保证系统中一个类仅仅有一个实例并且该实例易于外界訪问.从而方便对实例个 ...

  8. Swift 委托/代理设计模式

    Swift 中的委托/代理模式(以下简称"代理模式")与object-c的代理模式基本一致. 代理模式的基本思想就是将我(类或者结构体等)需要来完成的工作交给(委托给)另一个有我所 ...

  9. Socket.io在线聊天室

    从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎.chrome浏 ...

  10. git 使用随笔

    /*将远端库git@github.com:myrepo/base.git从远端clone到本地*/git clone git@github.com:myrepo/base.git /*克隆版本库的时候 ...