精华内容
下载资源
问答
  • websql

    2016-01-14 14:58:22
    chrome浏览器的websql用于在客户端创建数据库,暂时存储数据。只在当前页面有效,页面刷新后websql被清空。以下是websql的使用方式: var db = openDatabase ('mydatabase', '2.0', 'my db', 2 * 1024);//...

    chrome浏览器的websql用于在客户端创建数据库,暂时存储数据。只在当前页面有效,页面刷新后websql被清空。以下是websql的使用方式:


    var db = openDatabase ('mydatabase', '2.0', 'my db', 2 * 1024);//数据库名,版本号,描述,数据库大小,创建回调(nullable)
    db.transaction(function(tx){
    var sql = 'create table if not exists t1(id unique,name,age)';//建表的时候注意,js不支持类型,所以字段也没有类型
    tx.executeSql(sql);//执行sql
    sql = 'insert into t1(id,name,age) values(1,"tom",19)';
    tx.executeSql(sql);
    sql = 'insert into t1(id,name,age) values(?,?,?)';
    tx.executeSql(sql, [2,'jim',20]);//动态传值
    sql = 'select * from t1';
    tx.executeSql(sql, [], function(tx,results){
    var len = results.rows.length;
    for(var i=0;i<len;i++){
    var name = results.rows[i].age;
    alert(name);
    }
    });
    });//一个事务


    展开全文
  • 浏览器有存储数据需求,这两天查了下相关文档,重点学习了下。以谷歌浏览器 F12 调出控制台,主要有 Cookie、Local Storage、Session Storage、IndexedDB、Web SQL 几种方案,下面逐一简单说下。Cookie最早用于 ...

    随着··· ···,废话就不多铺垫了,直接进入主题吧。浏览器有存储数据的需求,这两天查了下相关文档,重点学习了下。以谷歌浏览器 F12 调出控制台,主要有 Cookie、Local Storage、Session Storage、IndexedDB、Web SQL 几种方案,下面逐一简单说下。

    266d94477388dd87387f78711008066e.png

    Cookie

    最早用于 HTTP 状态管理机制,Cookie 通常在 Web 应用程序中用于识别用户及其身份验证的会话,兼容性好。Cookie 是一段不超过 4KB 的小型文本数据,由一个名称(Name)、一个值(Value)和其它几个用于控制 Cookie 有效期、安全性、使用范围的可选属性组成。客户端发起请求时请求头会附带 Cookie 信息,过多的 Cookie 设置会影响请求效率。

    Cookie 的原生 API 不友好,需要自行封装一下。

    参考文档:

    • https://www.w3.org/TR/csp-cookies/

    • https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

    Web Storage

    传统的 Cookie 方式存储数据有诸多限制(数量、大小),然而随着 Web 应用的发展,客户端存储的需求越来越多,为此 HTML5 提出了 Web Storage 的解决方案, Web Storage 包含 Local Storage 及 Session Storage 两种存储机制。

    Local Storage

    Local Storage 永久保留数据,直至手动清除。每个数据源的最大限制为5 MB。

    常用方法:

    • localStorage.length

    • localStorage.setItem(keyName, keyValue);

    • localStorage.getItem(keyName);

    • localStorage.removeItem(keyName);

    • localStorage.key(index);

    • localStorage.clear();

    Session Storage

    Session Storage 浏览器关闭,结束当前会话后自动清除。每个数据源的最大限制为5 MB。

    常用方法:

    • sessionStorage.length

    • sessionStorage.setItem(keyName, keyValue);

    • sessionStorage.getItem(keyName);

    • sessionStorage.removeItem(keyName);

    • sessionStorage.key(index);

    • sessionStorage.clear();

    参考文档:

    • https://www.w3.org/TR/webstorage/

    • https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

    • https://www.w3school.com.cn/html5/html_5_webstorage.asp

    IndexedDB

    IndexedDB 类似浏览器的本地数据库,允许储存大量数据,提供查找接口,还能建立索引。

    常用方法:

    • indexedDB.open(databaseName, version);  打开指定版本的数据库

    • IDBEnvironment:提供对IndexedDB功能的访问。它由window和worker对象实现。该接口不是2.0规范的一部分。

    • IDBFactory:提供对数据库的访问。这是由全局对象实现的接口indexedDB ,因此是API的入口点。

    • IDBOpenDBRequest:表示打开数据库的请求。

    • IDBDatabase:表示与数据库的连接。这是在数据库上进行事务处理的唯一方法。

    • IDBTransaction:代表交易。您在数据库上创建事务,指定范围(例如要访问的对象存储),并确定所需的访问类型(只读或读写)。

    • IDBRequest:通用接口,用于处理数据库请求并提供对结果的访问。

    • IDBObjectStore:表示一个对象存储,该对象存储允许访问通过主键查找的IndexedDB数据库中的一组数据。

    • IDBIndex:还允许访问IndexedDB数据库中的数据子集,但使用索引来检索记录而不是主键。有时这比使用快IDBObjectStore。

    • IDBCursor:遍历对象存储和索引。

    • IDBCursorWithValue:遍历对象存储和索引,并返回游标的当前值。

    • IDBKeyRange:定义键范围,该键范围可用于从特定范围的数据库中检索数据。

    参考文档:

    • https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

    • https://www.w3.org/TR/IndexedDB/

    • ruanyifeng.com/blog/2018/07/indexeddb.html

    Web SQL

    Beware. This specification is no longer in active maintenance and the Web Applications Working Group does not intend to maintain it further.

    这是··· ···,弃坑了。

    参考文档:

    • https://www.w3.org/TR/webdatabase/

    展开全文
  • Web SQL 学习笔记

    2020-12-24 16:17:01
    目前很少有大互联网公司使用 Web SQL 进行数据存储,但是它在桌面应用(如:electron)以及手机应用中存储数据还是很香。 1,创建数据库 方法:openDatabase 参数:(数据库名称 版本号 描述文本 数据库大小 创建回...

    一. 基础入门

    Web SQL 数据库的开发者使用了与 SQL 后端(Sqlite)同样的规范,目前已经停止维护。支持常规的增删改查,事物,回滚等操作。

    目前很少有大的互联网公司使用 Web SQL 进行数据存储,但是它在桌面应用(如:electron)以及手机应用中存储数据还是很香的。

    1,创建数据库

    方法:openDatabase
    参数:(数据库名称 版本号 描述文本 数据库大小 创建回调)
    示例:

    var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
    

    2,事物
    方法:transaction
    说明:保持逻辑数据一致性和可恢复性,事物一般包含具有关联逻辑的一系列操作,当某个操作执行失败时,进行数据回滚,回到最初的状态,Web SQL 除了创建 db 以外所有操作都通过事物来执行。
    3,执行 SQL
    方法:executeSql
    示例:

    db.transaction(function (tx) {
        tx.executeSql('DELETE FROM LOGS  WHERE id=1');
    });
    

    4,数据库查询语句

    常规的数据库操作包括以下几类:
    DQL:Data Query Language , 数据查询。一般为 select ,from 和 where 等组成。
    DML:Data Manipulation Language,数据操作语言。一般为 insert / update/delete 等
    DPL:事物处理语言,事务处理语句能确保被 DML 语句影响的表的所有行及时得以更新
    DCL:通过 GRANT 和 REVOKE,确定单个用户或用户组对数据库对象的访问权限
    DDL:常用的有 CREATE 和 DROP,用于在数据库中创建新表或删除表,以及为表加入索引等
    CCL:DECLARE CURSOR、FETCH INTO 和 UPDATE WHERE CURRENT 用于对一个或多个表单独行的操作

    二. 示例:

    以创建学生表为例:

    建库建表

    • 建库建表
    var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
    db.transaction(function (tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS STUDENTS (id unique, name ,age)');
    });
    
    • 插入数据
    db.transaction(function (tx) {
        tx.executeSql('INSERT INTO STUDENTS (id,name ,age) VALUES (1,"张三",18)');
        tx.executeSql('INSERT INTO STUDENTS (id,name ,age) VALUES (2,"李四",19)');
        tx.executeSql('INSERT INTO STUDENTS (id,name ,age) VALUES (3,"王五",20)');
    });
    
    • 删除数据
    db.transaction(function (tx) {
        tx.executeSql('DELETE FROM STUDENTS  WHERE id=1');
    });
    
    • 修改数据
    db.transaction(function (tx) {
       tx.executeSql('UPDATE STUDENTS SET name="史密斯" WHERE id=1');
       tx.executeSql('UPDATE STUDENTS SET age="21" WHERE id=2');
       tx.executeSql('UPDATE STUDENTS SET name="特鲁朗普" WHERE id=3');
    });
    
    • 查询数据
        db.transaction(function (tx) {
            tx.executeSql('SELECT * FROM STUDENTS', [], function (tx, results) {
                var len = results.rows.length,
                    i;
                for (i = 0; i < len; i++) {
                    console.log(JSON.stringify(results.rows.item(i)));
                }
            });
        });
    

    依次执行以上操作,输出结果:

        {"id":1,"name":"史密斯","age":18}
        {"id":2,"name":"李四","age":"21"}
    

    通过结果可以分析:
    执行新增/删除/修改结果均已生效
    修改 id 为 3 的所在行,该行不存在并不影响整体执行成功

    三. 拓展

    持久化
    通过控制台 -> Storage -> Web SQL -> mydb -> STUDENTS 能看到存储的内容。
    通过关闭浏览器,重新打开执行查询语句我们会发现结果依然存在

    清空数据库
    可以通过控制台 -> Application -> Clear Storage 清空 Web SQL 的内容。
    在这里插入图片描述

    事物结果
    当在事物中执行多次操作时,如果仅执行失败,未抛出异常情况下整体执行成功。如果需要捕获事物执行结果,可以在 transaction 第二个参数传入异常处理函数

    db.transaction(function (tx) {
        tx.executeSql('UPDATE STUDENTS SET name2="史密斯" WHERE id=1');
        tx.executeSql('UPDATE STUDENTS SET age="22" WHERE id=2');
    }, (err)=> {
        console.log(err)
    });
    
    

    执行结果:

    SQLError {code: 5, message: "could not prepare statement (1 no such column: name2)"}
    

    此时,id 为 2 的 set 操作不会成功。当没有产生错误时,transaction 的回调 err 变量将为 undefined。

    快捷操作

    当新建好数据库及表后可以在 Application 快捷输入 SQL 语法进行增删改查
    在这里插入图片描述

    展开全文
  • WebStorage和WebSQL

    2018-11-23 21:52:46
    早期,本地存储使用的是cookie,但是由于cookie的大小及安全性能等方面的局限性衍生出了web存储。web存储的数据并不需要像cookie那般在每次请求中都与服务器交互,它将数据存储在本地。除此之外,它还也可以大量存储...

    一、web Storage

    早期,本地存储使用的是cookie,但是由于cookie的大小及安全性能等方面的局限性衍生出了web存储。web存储的数据并不需要像cookie那般在每次请求中都与服务器交互,它将数据存储在本地。除此之外,它还也可以大量存储数据而不影响网站性能。

    客户端存储数据的两个对象为:localStorage和sessionStorage。

    两者使用的API都相同,常用的有如下几个:setItem(key,value)、getItem(key)、removeItem(key)、clear();

    不管是localStorage还是sessionStorage,在使用前一半都要检查一下浏览器是否支持本地存储,一搬检查方法如下:

    if(typeof(Storage)!=="undefined")

    { // 是的! 支持 localStorage sessionStorage 对象! // 一些代码..... }

    else

    { // 抱歉! 不支持 web 存储。 }

     

    一)、localStorage

    特性:会话控制、短期保存。会话概念与服务器端的session概念相似,短期保存指窗口或浏览器或客户端关闭后自动消除数据。

    操作函数:

    • 保存数据:localStorage.setItem(key,value);
    • 读取数据:localStorage.getItem(key);
    • 删除单个数据:localStorage.removeItem(key);
    • 删除所有数据:localStorage.clear();
    • 得到某个索引的key:localStorage.key(index);

    二)sessionStorage

    特性:  会话控制、短期保存。会话概念与服务器端的session概念相似,短期保存指窗口或浏览器或客户端关闭后自动消除数据。

    操作函数:

    • 保存数据:sessionStorage .setItem(key,value);
    • 读取数据:sessionStorage .getItem(key);
    • 删除单个数据:sessionStorage .removeItem(key);
    • 删除所有数据:sessionStorage .clear();
    • 得到某个索引的key:sessionStorage .key(index);

    三)用法举例

    两者用法相同,就以localStorage为例。

    if(typeof(Storage)!=="undefined")
    {
    	if (localStorage.clickcount)
    	{
    		localStorage.clickcount=Number(localStorage.clickcount)+1;
    	}
    	else
    	{
    		localStorage.clickcount=1;
            //此处也可以使用 localStorage.setItem("clickcount",1); 
            //其结果是一样的
    	}
    	document.getElementById("result").innerHTML=" 你已经点击了按钮 " + 
        localStorage.clickcount + " 次 ";
        //此处也可以使用 localStorage.getItem("clickcount");
    }
    else
    {
    	document.getElementById("result").innerHTML="对不起,您的浏览器不支持 web 存储。";
    }

    在Web Storage的两个对象中,我们比较常用的是localStorage,至于session的话一般就交给后台去写。但出现兼容性问题,即浏览器不支持localStorage时,可以使用cookie来进行存储数据,所以为保险起见,可以对本地存储的四个操作函数再次进行封装,当浏览器不支持localStorage时自动切换为cookie进行存储,当然还可以进一步的实现当不支持cookie时上传到服务端存储,以上做法都为保险起见。

     

    二、WebSQL

    webSQL是一个操作数据库的对象,里面封装了操作数据库的方法,是通过sql语句操作数据库的(创建数据库、建表、增删改查)的字符串,他不会自己执行; 在webSQL里面有执行sql语句的方法,就会去执行sql里面描述的功能; webSQL跟sql语句是完全独立的两个东西(webSQL是前端独有的API,后者只要是sqlite类型的数据库都可以使用)。

    (实际上,webSQL比上面讲的两种存储方式还要强大,但是由于自由主流的浏览器才实现webSQL,而一些非主流的浏览器还不能使用webSQL,使得webSQL并没有那么流行。)

    一)Web SQL本地存储的三个函数

    (1)openDatabase (数据库名字, 数据库版本号, 显示名字, 数据库保存数据的大小, 回调函数(可选))
            

    var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

    (2)executeSql(查询字符串, 用以替换查询字符串中问号的参数, 执行成功回调函数(可选), 执行失败回调函数(可选))
             参数一自然是SQL语句,其中值数据可用?代替;参数二是SQL语句中?对应的值(很像PDO的预处理)。注意,                         executeSql不能单独使用,需要在事务transaction函数下使用。例子如下:

     executeSql("CREATE TABLE IF NOT EXISTS MyData(name TEXT,message TEXT,time INTEGER)");

    可使用参数替换查询字符串中问号,就以插入值为例:

    tx.executeSql('INSERT INTO LOGS (name,message,time) VALUES (?, ?, ?)', [e_name, e_message,e_time]);

    (3)transaction(包含事务内容的一个方法, 执行成功回调函数(可选), 执行失败回调函数(可选))
             事务内容为一个或多个executeSql函数构成。这个函数很难用语言表达,所以请看例子:

    db.transaction(function(tx){
          tx.executeSql("CREATE TABLE IF NOT EXISTS MyData(name TEXT,message TEXT,time INTEGER)", [], function(){ 
                alert("create ok");
          });//创建表
          tx.executeSql("SELECT * FROM MyData", [], function(){alert("select ok")});//查询
          tx.executeSql("DROP TABLE IF EXISTS MyData", [], function(){alert("drop ok")});//删除表
    
    });

    以下是查询并读取数据的例子:

    db.transaction(function (tx) {
          tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
                var len = results.rows.length, i;
                msg = "<p>查询记录条数: " + len + "</p>";
                document.querySelector('#status').innerHTML +=  msg;
                for (i = 0; i < len; i++){
                      msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
                       //item(i)为i所对应的记录,log为表的字段名,也就是打印出表中所有log
                      document.querySelector('#status').innerHTML +=  msg;
                }
           }, null);
    });

     

     

    展开全文
  • 数据库名字数据库版本号显示名字数据库保存数据的大小(以字节为单位 )回调函数(非必须) //第二步:创建数据表【这个例子中我们创建了一个table,并在表中插入三条数据,四条执行语句任何一条出现错误,整个事务...
  • 体情况 h5之前,存储主要是用cookies。cookies缺点有在请求头上带着数据,大小是4k之内。主Domain污染。 ...主要应用:购物车、客户登录 ...解决关系型存储的问题 跨浏览器   1.本地存储loca
  • Web SQL Database

    2011-12-27 20:36:00
    db=openDatabase("ToDo","0.1","Alistoftodoitems.",200000); 上代码创建了一个数据库对象 db,名称是 Todo,版本编号为0.1。...利用代码中提供的大小值,用户代理可以为内容留出足够的存储。如果需要,...
  • WebSql用法(自我记录)

    千次阅读 2018-07-03 10:35:05
    websql主要是依托浏览器环境下一种离线存储方式,主要是用于关系性数据库,与sqllite相似判断浏览器是否支持if(window.openDatabase){ console.log(“浏览器支持DataBase”); }创建、打开数据库1、openDatabase ...
  • 本地存储,在浏览器中包括了 Cookies、Local Storage、Session Storage、WebSQL 和 IndexedDB 这 5 种形式的本地存储,它们之间的区别: ...不过可以存储的数据总量大小只有 4KB,如果超过了这个限...
  • 在以往,我们进行本地存储的时候是用document.cookie来存储的. 但是存储大小只有4k左右,解析也很复杂,效率得不到提高. HTML5规范则提出了解决方案,定义了两个重要的API:Web Storage 和 WebSQL Datebase. 本文主要讲解...
  • HTML5_04_存储_缓存_SQL

    2018-03-09 23:08:32
    HTML5 Web 存储在HTML5之前,主要是使用cookies存储,cookies缺点有:需要在请求头上带着数据,存储大小不能超过4kHTML5 web 存储,一个比cookie更好本地存储方式。什么是 HTML5 Web 存储?使用HTML5可以在 本地...
  • 前端本地存储(转)

    2019-06-25 11:39:15
    前端本地存储方式有:localStorage、sessionStorage、cookie、webSQL、indexedDB等 cookie : 用于客户端数据的存储,在客户端请求服务端,使用response向客户端浏览器发送一个cookie,当客户端再次访问该网站时候...
  • h5存储的几种方式

    千次阅读 2016-07-30 19:13:27
    2.webSQL、indexeddb 3.html5离线存储 详细教程请看:http://www.imooc.com/learn/104 以下是我整理一些方便自己用方法和概念:  //cookie是有大小和数量限制:http://www.cnblogs.com/henryhappier/archiv
  • 目录 前端HTML5几种存储方式总结 总体情况 ...4.Web SQL 5.IndexedDB 前端HTML5几种存储方式总结 总体情况 h5之前,存储主要是用cookies。cookies缺点有在请求头上带着数据,大小是...
  • 和传统 t-sql书籍不同,本书以独特 “技巧 ”形式来介绍知识点,涵盖了数据处理(增删改、视图、索引、存储过程、触发器等)、数据应用(web服务、 clr集成、分布式查询等)和数据库配置(主体、安全、数据库...
  • 废话不多说,本地存储的方式相信大家都知道,cookie,storage(分为sessionStorage和localStorage)还有IndexedDB Web SQL基本上淘汰了,这里就不讨论了啊 先简要介绍一下上面几个 cookie大家都知道,对存储有...
  • sql注入问题从WEB诞生到现在也一直没停过,各种大小公司都出现过sql注入问题,导致被拖库,然后存在社工库撞库等一系列影响。 防止sql注入个人理解最主要就一点,那就是变量全部参数化,能根本解决sql注入...
  •  看到这个问题,我第一想到就是我的sql语句,又是参数又是索引,经过我反复检查,没有问题, 然后我觉得是触发器、存储过程等参数传不对,但是也是不对。  解决方法:  我们在写代码调用web
  •  HTML4在客户端存储数据通常使用Cookie存储机制将数据保存在用户客户端,但使用Cookie方式存储客户端数据存在一系列制约发展因素,如限制存储数据空间大小、数据安全性差等。  HTML5中新增两种数据存储方式:...
  • webSQL/indexDB 接下来就这三种前端常用的存储方式进行介绍。 cookie cookie就是存储在客户端一小段文本,大小不能超过4kb,在请求接口时候,cookie会被请求携带着,进而被服务器所读取使用。 打开浏览器控制台...
  • 前端需要本地存储的数据量大的情况,cookie、sessionStorage、localStorage受其存储内存大小的限制,不能满足需求的情况下;就需要用到前端数据库的存储方式( Web SQL、IndexedDB);这里我们了解下IndexedDB 简述 ...
  • 精通Oracle PL/SQL--详细书签版

    热门讨论 2012-08-21 13:06:28
    这一章给出了我们认为“高效PL/SQL定义,并引入了贯穿全书主题可论证性(demonstrability),即最终需要证明你代码在所有合理条件下都满足性能指标。这一章说明了为什么PL/SQL几乎总是数据库编程正确...
  • html离线存储之localStorage(一)

    千次阅读 2017-02-04 20:12:14
    h5之前离线存储:cookie 问题是:1.cookie会在请求头中,臃肿且不安全 2.cookie有大小限制,4k 3.关系存储问题 h5提供离线存储方案: 1.localstorage 大小5M ...3.indexDB和webSQL localstorage  1
  • HTML5-本地存储总结

    2020-04-24 21:14:38
    这里介绍了JavaScript中使用HTML5新特性: 兼容 时间 大小 差异 sessionStorage all 类似【session】 localStorage all第二天、第二周或下一年之后,数据依然可用 globalStorage Firefox...Web Sql Database all

空空如也

空空如也

1 2 3 4 5 ... 10
收藏数 187
精华内容 74
关键字:

websql存储的大小