了解sql

cookies

浏览器限制最大只能4k

localstorage/sessionstorage

适合小数据量的储存，firefox/chrome限制最大5m。
localStorage是以字符串形式存储的，存之前要先用 JSON.stringify 变成字符串，取出的时候使用JSON.parse 恢复成对应的格式

复杂数据管理（webSQL）

WEB SQL 是前端数据库，它是本地储存的一种，使用SQLite实现，SQLite实现，它是一种轻量级的数据库，占用空间小，支持创建表，插入、修改、删除表格数据，但是不支持修改表结构（如删掉一纵列，修改表头等），不过可以把整张表删了
同一个域可以创建多个db，每个db有若干张表。如果单张表指定的空间太大，浏览器会提示用户是否允许使用这么多的空间。
firefox 不支持

/**
*   四个参数
*       1. dbName   2. dbVersion 3. dbDescription   4. dbMemory
*/let db = window.openDatabase("db_test","v1.0","this is webSQL ","dbMemory"
)

创建表

/**
* db.transaction,它会传入一个SQLTransaction的实例，表示一个事务，然后调用executeSql函数，传入四个参数
* 1. sql语句 2. 参数选项 3. 成功的回调函数 4. 失败的回调函数
*/

db.transaction(tx=>{tx.executeSql("create table if not exists order_data(order_id primary key,format_city,lat,lng,price,create_time)",[],null,(tx,err)=>{throw(`execute sql failed: ${err.code} ${err.message}`)})
})// 描述 ： 创建一张order_data表，它的字段有6个，order_id为主键（主键用来标志这一行，并且不允许有重复的值）

插入数据

db.transaction(tx=>{console.log(tx)tx.executeSql(`insert into order_data values(${order.orderId},'${order.format_city}',${order.lat},${order.lng},${order.price},${order.createTime})`)},(err)=>{console.log("操作失败",err)
})

实例

/**
*   @param dbName 数据库名字
*   @param version 数据库版本
*   @param description 数据库描述
*   @param memory 数据库内存容量
*   @param create 建表
*   @param tables 表格字段
*   @param values 插入字段
*/
function websql(obj){let {db,dbName,version,description,memory,create,tableName,tables,insert,values,insertTable} = objif(dbName && version && description && memory){return window.openDatabase(dbName,version,description,memory)}else if(db && tableName && create && tables){createTable(db,tableName,tables,insert,)}else if(db && insert && values){tableInsert(db,values,tableName,insertTable)}
}
function createTable(db,tableName,tables,insert,values){ // 创建db.transaction(tx=>{tx.executeSql("create table if not exists "+tableName+"(" + tables +")",[],(db,res)=>{   // 成功的函数console.log(res)insert && values && db.executeSql("insert into order_data values("+values+")")},(tx,err)=>{ // 失败回调console.log(tx)throw(`execute sql failed : ${err.code} ${err.message}`)})})
}
function tableInsert(db,values,tableName,insertTable){  // 插入db.transaction(tx=>{tx.executeSql("insert into "+tableName+"("+insertTable+") values("+values+")")},(err)=>{console.log("插入失败",err)})
}
let db = websql({dbName:'test_db',version:'v1.0',description:"qiphon's db",memory:2*1024*1024
})
// console.log(db)
db && websql({db,create:1,tableName:"student2",tables:'id integer primary key,score,create_time',
})
db && websql({db,insert:1,tableName:"student2",insertTable:"score, create_time",values:`101,${new Date().getTime()}`
})

主键约束

如果插入一个重复的主键，这里为order_id，executeSql 会报错，所以一般id是自动生成的，MySQL可以指定某个整数字段为auto_increment,而webSQL 对整数字段不指定也是auto_increment,需要在创建的时候指定当前字段为integer

create table student(id integer primary key,age,score)insert into student(age,score) values(19,87)

select 查询

select city as "城市",count(order_id) as count, sum(price) as price from table group by city order by date desc limit 0,10select id form table where id = ${order_id}

创建索引

主键，自动会有索引，其他字段需要手动创建索引,创建索引会提高查询效率

create index if not exists index_score on student(score)

关系型数据库的优缺点

1. SQL支持非常复杂的查询，可以联表查询、使用正则表达式查询、嵌套查询，还可以写一个独立的SQL脚本

2. 缺点：

    1. 不方便横向扩展，如果给数据表添加一个字段，当这个字段达到亿级，操作的复杂性会变得非常高2. 海量数据用SQL联表查询性能将会非常差3. 关系型数据库为保持事物的一致性特点，难以应对高并发

非关系型数据库

非关系型数据库根据他的存储特点，常用的有

key-value 型，如 Redis/IndexedDB,value可以为任意的数据类型

JSON/document 型,如mongoDB,value按照一定的格式，可以对value字段做索引，IndexDB也支持

非关系型数据库也叫NoSQL数据库。是not Only SQL 的简写，意思是不仅仅是SQL，但实际它和SQL没有什么关系，只是为了让大家感觉他不是太异类。
它的特点是存储比较灵活，但是查找没有像关系型SQL一样好用，适用于数据量很大，只需要单表key查询，一致性不用很高的场景。

IndexedDB

IndexedDB 是本地存储的第三种方式，它是非关系型数据库。它的建立数据库、建表、插入数据等操作

SQL 注入

// 问题示例
select * form order_data where user_id = 2342342323 and state = '${userData.state}'// 脚本注入的方法
select * form order_data where user_id = 2342342323 and state = 'ca' union select * from order_data where '' = '';

分布式数据库

如果网站的访问量太大，一个数据库很可能扛不住，需要多搞几台相同的数据库分担压力，但是要保证这几个数据库数据一致性。有很多解决方案，最简单的如mySQL的replication

前端的应如果不需要兼容ie 和firefox 那么就可以直接使用 indexedDB 和 webSQL

web sql indexedDB相关推荐

HTML5本地存储——Web SQL Database
在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...
HTML5 离线存储之Web SQL
HTML5 在离线存储之Web SQL 本篇没有考虑异步,多线程及SQL注入 WebDatabase 规范中说这份规范不再维护了,原因是同质化(几乎实现者都选择了Sqlite), 且不说这些,单看在H ...
HTML5 Web SQL数据库
HTML5 Web SQL 数据库 Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs. 如果你是一个 We ...
HTML5 Web SQL
Web Sql Database,中文翻译作"本地数据库",是随着HTML5规范加入的在浏览器端运行的轻量级数据库. 在HTML5中,大大丰富了客户端本地可以存储的内容,添加了很多 ...
html日期写入数据库,javascript – 在HTML5 Web SQL数据库中对日期时间进行排序
我无法找到解决问题的方法. 我有一个HTML5 Web SQL数据库,其表格如下: db.transaction(function(tx) { tx.executeSql("CREATE T ...
Web SQL Database 之 SQLite语法
Web SQL Database 之 SQLite语法目录(?)[+] 转自:http://www.cnblogs.com/helloandroid/articles/2150272.html id ...
JS 新建web sql 数据表
//新建web sql数据库数据表var tbName="tableName";var strSQL="create table if not exists tableN ...
html 5 本地数据库（Web Sql Database）
基于HTML5的Web DataBase 可以让你在浏览器中进行数据持久地存储管理和有效查询,假设你的离线应用程序有需要规范化的存储功能本文讲述如何使用核心方法openDatabase.transa ...
html5 多页面共享数据库,可以跨页面使用HTML5 Web SQL数据库吗？(Can HTML5 Web SQL databases be used across pages?)...
可以跨页面使用HTML5 Web SQL数据库吗?(Can HTML5 Web SQL databases be used across pages?) 这可能是一个非常简单的问题,请原谅我的无知,但 ...

web sql indexedDB