<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>websql应用</title>

     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>

 </head>

 <body>

 <input type="text" id="title" />

 <textarea name="context" id="context" cols="20" rows="8"></textarea>

 <input type="button" value="保存" onclick="save()" />

 <input type="button" value="查看" onclick="chakan()" />

 <ol id="chakan">

 123

 </ol>

 </body>

 <script>

 var dbsize=2*1024*1024;

 db=openDatabase("todo","","",dbsize);

 db.transaction(function(tx){

     tx.executeSql("CREATE TABLE IF NOT EXISTS notes (id integer PRIMARY KEY,title char(50),inputMemo text,last_date datetime)");

 }

 );

 function save(){

     var title=$("#title").val();

     var inputMemo=$("#context").val();

     db.transaction(function(tx){

     tx.executeSql("INSERT INTO notes (title,inputMemo,last_date) values(?,?,datetime('now','localtime'))",[title,inputMemo]);

     });

 }

 function chakan(){

     $("ol").empty();

     var note="";

     db.transaction(function(tx){

         tx.executeSql("SELECT id,title,inputMemo,last_date FROM notes",[],function(tx,result){

             if(result.rows.length>0){

                 for (var i = 0; i <result.rows.length; i++) {

                     var item=result.rows.item(i);

                     //console.log(item["inputMemo"]);

                     note+="<li>"+"<h3>"+item["title"]+"</h3><p>"+item["inputMemo"]+"</p></li>";

                 }

                 $("#chakan").append(note);

             }}

         );

     });

 }

 </script>

 </html>

websql使用实例的更多相关文章

  1. 最近学习工作流 推荐一个activiti 的教程文档

    全文地址:http://www.mossle.com/docs/activiti/ Activiti 5.15 用户手册 Table of Contents 1. 简介 协议 下载 源码 必要的软件 ...

  2. WebSQL实例记录

    <table id="content"> </table> <br> <input type="button" id= ...

  3. 基于HTML5 的WebSql本地设备数据库

    HTML5 的 Web SQL Database 用本地和会话存储实现简单的对象持久化,对繁琐的关系数据进行处理. 在 W3C 的 Web SQL Database 规范中(参照 介绍)有这样的描述: ...

  4. js-静态、原型、实例属性

    本篇来说一下js中的属性: 1.静态属性 2.原型属性 3.实例属性 静态属性: function klass(){} var obj=new klass(); klass.count=0; klas ...

  5. ZIP压缩算法详细分析及解压实例解释

    最近自己实现了一个ZIP压缩数据的解压程序,觉得有必要把ZIP压缩格式进行一下详细总结,数据压缩是一门通信原理和计算机科学都会涉及到的学科,在通信原理中,一般称为信源编码,在计算机科学里,一般称为数据 ...

  6. EntityFramework Core 1.1是如何创建DbContext实例的呢？

    前言 上一篇我们简单讲述了在EF Core1.1中如何进行迁移,本文我们来讲讲EF Core1.1中那些不为人知的事,细抠细节,从我做起. 显式创建DbContext实例 通过带OnConfiguri ...

  7. redis集成到Springmvc中及使用实例

    redis是现在主流的缓存工具了,因为使用简单.高效且对服务器要求较小,用于大数据量下的缓存 spring也提供了对redis的支持: org.springframework.data.redis.c ...

  8. 流程开发Activiti 与SpringMVC整合实例

    流程(Activiti) 流程是完成一系列有序动作的概述.每一个节点动作的结果将对后面的具体操作步骤产生影响.信息化系统中流程的功能完全等同于纸上办公的层级审批,尤其在oa系统中各类电子流提现较为明显 ...

  9. UWP开发之Template10实践：本地文件与照相机文件操作的MVVM实例(图文付原代码)

    前面[UWP开发之Mvvmlight实践五:SuspensionManager中断挂起以及复原处理]章节已经提到过Template10,为了认识MvvmLight的区别特做了此实例. 原代码地址:ht ...

随机推荐

  1. URAL 1519 Formula 1 （插头DP，常规）

    题意:给一个n*m的矩阵,格子中是'*'则是障碍格子,不允许进入,其他格子都是必走的格子,所走格子形成一条哈密顿回路,问有多少种走法? 思路: 本来是很基础的题,顿时不知道进入了哪个坑.这篇插头DP的 ...

  2. （一）mybatis之JDBC介绍

    前言:为什么在学mybatis之前要先了解JDBC呢?因为mybatis是以ORM模型为中心思想的框架,而所有的ORM模型都是基于JDBC进行封装的,不同的ORM模型对JDBC封装的强度是不一样的. ...

  3. nginx 编译某个模板的问题./configure: error: SSL modules require the OpenSSL library. You can either do not enable the modules, or install the OpenSSL library into the system, or build the OpenSSL library stati

    root@hett-PowerEdge-T30:/usr/local/src/nginx-1.9.8# ./configure --prefix=/usr/local/nginx  --add-mod ...

  4. UVA 10817 - Headmaster's Headache（三进制状压dp）

    题目:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=20&pag ...

  5. nyoj-1103-区域赛系列一多边形划分

    http://acm.nyist.net/JudgeOnline/problem.php?pid=1103 区域赛系列一多边形划分 时间限制:1000 ms  |  内存限制:65535 KB 难度: ...

  6. javascript基本数据类型问题汇总

    isNaN()检测是否是NaN: 比较浮点相等,用绝对值,是否小于某一个阈值 Math.abs(1/3 - (1-2/3))<0.0000001: 字符串多行显示\n,ES6中使用反引号``: ...

  7. python-DB模块实例

    MySQLdb其实有点像php或asp中连接数据库的一个模式了,只是MySQLdb是针对mysql连接了接口,我们可以在python中连接MySQLdb来实现数据的各种操作. python连接mysq ...

  8. Bootstrap select(选择列表)

    当您想让用户从多个选项中进行选择,但是默认情况下只能选择一个选项,则使用选择框 1.使用<select>展示列表选项 2.使用multiple="multiple"允许 ...

  9. java在线聊天项目 swt可视化窗口Design 登录框注册按钮点击改变窗口大小——出现注册面板 实现打开登录框时屏幕居中

    登录框注册按钮点击改变窗口大小——出现注册面板  首先用swt可视化设计登录窗口如下图: 此时窗口高度为578 没点击注册时高度为301(可自己定) 注意:注册用户的Jpanel 的border选择T ...

  10. Gentoo更新portage记录

    小记一下这两天更新服务器版本遇到的各种问题. 服务器系统: Gentoo 第一天 其实本来不打算更新系统的,因为最近想试试免费的SSL证书,于是自然而然搜到了letsencrypt,跟着他们的流程需要 ...