zoukankan      html  css  js  c++  java
  • localStorage

    • length:唯一的属性,只读,用来获取storage内的键值对数量。
    • key:根据index获取storage的键名
    • getItem:根据key获取storage内的对应value
    • setItem:为storage内添加键值对
    • removeItem:根据键名,删除键值对
    • clear:清空storage对象
    • var ls=localStorage;
                  console.log(ls.length);//0
                  ls.setItem('name','Byron');
                  ls.setItem('age','24');
                  console.log(ls.length);//2
                  
                  //遍历localStorage
                  for(var i=0;i<ls.length;i++){
                      /*
                          age : 24 
                          name : Byron 
                      */
                      var key=ls.key(i);
                      console.log(key+' : '+ls.getItem(key));
                  }
                  
                  ls.removeItem('age');
                  
                  
                  for(var i=0;i<ls.length;i++){
                      /*
                          name : Byron 
                      */
                      var key=ls.key(i);
                      console.log(key+' : '+ls.getItem(key));
                  }
                  ls.clear();//0
                  console.log(ls.length);
    • window.addEventListener('storage',function(e){
                      console.log(e.key+' is changed form '+e.oldValue+' to '+e.newValue+' by '+e.url );
                      console.log(e.storageArea ==localStorage);
                  },false);
                  
                  localStorage.setItem('userName','Byron');

    ====================http://codepen.io/jianyeruan/pen/mPdrjp?editors=1111

    Web SQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范。它通过一套API来操纵客户端的数据库。Safari、Chrome、Firefox、Opera等主流浏览器都已经支持Web SQL Database。HTML5的Web SQL Databases的确很诱惑人,当你发现可以用与mysql查询一样的查询语句来操作本地数据库时,你会发现这东西挺有趣的。今天,我们一起来了解HTML 5的Web SQL Database API。

    下面将一一将介绍怎样创建打开数据库,创建表,添加数据,更新数据,删除数据,删除表 。

    先介绍三个核心方法

    1、openDatabase:这个方法使用现有数据库或创建新数据库创建数据库对象。

    2、transaction:这个方法允许我们根据情况控制事务提交或回滚。

    3、executeSql:这个方法用于执行真实的SQL查询。

    第一步:打开连接并创建数据库

    var dataBase = openDatabase("student", "1.0", "学生表", 1024 * 1024, function () { });
    if (!dataBase) {
    alert("数据库创建失败!");
    } else {
    alert("数据库创建成功!");
    }

    解释一下openDatabase方法打开一个已经存在的数据库,如果数据库不存在,它还可以创建数据库。几个参数意义分别是:
    1,数据库名称。
    2,版本号 目前为1.0,不管他,写死就OK。
    3,对数据库的描述。
    4,设置数据的大小。
    5,回调函数(可省略)。
    初次调用时创建数据库,以后就是建立连接了。
    创建的数据库就存在本地,路径如下:
    C:UsersAdministratorAppDataLocalGoogleChromeUser DataDefaultdatabaseshttp_localhost_* 。
    创建的是一个sqllite数据库,可以用SQLiteSpy打开文件,可以看到里面的数据。SQLiteSpy是一个绿色软件,可以百度一下下载地址或SQLiteSpy官方下载:SQLiteSpy

    第二步:创建数据表

    复制代码
    this.createTable=function() {
    dataBase.transaction( function(tx) { 
    tx.executeSql(
    "create table if not exists stu (id REAL UNIQUE, name TEXT)", 
    [], 
    function(tx,result){ alert('创建stu表成功'); }, 
    function(tx, error){ alert('创建stu表失败:' + error.message); 
    });
    });
    }
    复制代码

    解释一下,
    executeSql函数有四个参数,其意义分别是:
    1)表示查询的字符串,使用的SQL语言是SQLite 3.6.19。(必选)
    2)插入到查询中问号所在处的字符串数据。(可选)
    3)成功时执行的回调函数。返回两个参数:tx和执行的结果。(可选)
    4)一个失败时执行的回调函数。返回两个参数:tx和失败的错误信息。(可选)

    第三步:执行增删改查

    1)添加数据:

    复制代码
    this.insert = function () {
    dataBase.transaction(function (tx) {
    tx.executeSql(
    "insert into stu (id, name) values(?, ?)",
    [id, '徐明祥'],
    function () { alert('添加数据成功'); },
    function (tx, error) { alert('添加数据失败: ' + error.message); 
    } );
    });
    复制代码

     2)查询数据

    复制代码
    this.query = function () {
    dataBase.transaction(function (tx) {
    tx.executeSql(
    "select * from stu", [],
    function (tx, result) { //执行成功的回调函数
    //在这里对result 做你想要做的事情吧...........
    },
    function (tx, error) {
    alert('查询失败: ' + error.message);
    } );
    });
    }
    复制代码

    特别提醒
    上面代码中执行成功的回调函数有一参数result。 

    result:查询出来的数据集。其数据类型为 SQLResultSet ,就如同C#中的DataTable。 
    SQLResultSet 的定义为:

    interface SQLResultSet {
    readonly attribute long insertId;
    readonly attribute long rowsAffected;
    readonly attribute SQLResultSetRowList rows;
    };

    其中最重要的属性—SQLResultSetRowList 类型的 rows 是数据集的“行” 。 
    rows 有两个属性:length、item 。
    故,获取查询结果的第一行列名为name的值 :result.rows.item(0).name  。

    3)更新数据

    复制代码
    this.update = function (id, name) {
    dataBase.transaction(function (tx) {
    tx.executeSql(
    "update stu set name = ? where id= ?",
    [name, id],
    function (tx, result) {
    },
    function (tx, error) {
    alert('更新失败: ' + error.message);
    });
    });
    }
    复制代码

    4)删除数据

    复制代码
    this.del = function (id) {
    dataBase.transaction(function (tx) {
    tx.executeSql(
    "delete from stu where id= ?",
    [id],
    function (tx, result) {
    },
    function (tx, error) {
    alert('删除失败: ' + error.message);
    });
    });
    }
    复制代码

    5)删除数据表

    window.addEventListener('load', function(e) {
    window.applicationCache.addEventListener('updateready', function(e) {
    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
    // Browser downloaded a new app cache.
    // Swap it in and reload the page to get the new hotness.
    window.applicationCache.swapCache();
    if (confirm('A new version of this site is available. Load it?')) {
    window.location.reload();
    }
    } else {
    // Manifest didn't changed. Nothing new to server.
    }
    }, false);
    }, false);

    HTML5的本地存储,还提供了一个storage事件,可以对键值对的改变进行监听,使用方法如下:

    if(window.addEventListener){
    window.addEventListener("storage",handle_storage,false);
    }else if(window.attachEvent){
    window.attachEvent("onstorage",handle_storage);
    }
    function handle_storage(e){
    if(!e){e=window.event;}
    //showStorage();
    }

    this.dropTable = function () {
    dataBase.transaction(function (tx) {
    tx.executeSql('drop table stu');
    });
    }
  • 相关阅读:
    常见寻找OEP脱壳的方法
    Windows内核原理系列01
    HDU 1025 Constructing Roads In JGShining's Kingdom
    HDU 1024 Max Sum Plus Plus
    HDU 1003 Max Sum
    HDU 1019 Least Common Multiple
    HDU 1018 Big Number
    HDU 1014 Uniform Generator
    HDU 1012 u Calculate e
    HDU 1005 Number Sequence
  • 原文地址:https://www.cnblogs.com/jayruan/p/5222616.html
Copyright © 2011-2022 走看看