江苏龙网

  1. 主页 > 生活百科 > >

一文带你搞懂前端本地存储( 三 )

前端本地存储

  • 清空全部Storage
/** * 清空全部Storage */export const clearStore = (params = {}) => {  let { type } = params;  if (type) {    window.sessionStorage.clear();  } else {    window.localStorage.clear()  }}cookie、localStorage、sessionStorage异同数据存储时间
  • cookie 可以自己设置失效时间
  • localStorage 不主动清除，则永久存储
  • sessionStorage 当前页面关闭时被删除
大小
  • cookie 最大4kb
  • localStorage 最大5MB
  • sessionStorage 最大5MB
请求是否携带
  • cookie 每次请求会携带在请求头中
  • localStorage 不携带，仅在客户端存储
  • sessionStorage 不携带，仅在客户端存储
易用性
  • cookie 原生api使用不友好，需自己二次封装
  • localStorage 原生接口可使用，也可以自己二次封装
  • sessionStorage 原生接口可使用，也可以自己二次封装
个人推荐在项目中使用storage存储，cookie存储数据过多，会造成性能问题 。当然，大家可以根据实际情况进行选择，二次封装方法已双手奉上 。
webSQL/indexDB对于简单的数据存储，storage和cookie就已经够用了，但是如果需要存储比较复杂的关系型数据，再使用storage和cookie，就有点力不从心了 。这个时候可以使用webSQL或者indexDB进行存储 。
webSQLWeb SQL数据库API是一个独立的规范，在浏览器层面提供了本地对结构化数据的存储，已经被很多现代浏览器支持了 。
一文带你搞懂前端本地存储

文章插图
 
核心api
  • openDatabase() => 用来打开或创建数据库（没有时则创建，有则打开）
  • transaction() => 这个方法可以控制一个或多个事务，以及基于这种情况提交或者回滚
  • executeSql() => 用于执行实际的 SQL 查询
判断浏览器是否支持该功能从上面的图中可以看出，webSQL兼容性并不是太好，因此使用时，我们需要先判读那浏览器是否支持 。
if (window.openDatabase) {    // 操作 web SQL        } else {     alert('当前浏览器不支持 webSQL !!!');}webSQL操作类封装webSQL操作类封装代码量较大，此处就不再展示，需要的小伙伴可以关注我公众号回复【webSQL操作类】获取 。下面给个简单的例子:
var myDB = {    name: 'formData',    version: 1,    db: null,};myDB.db = openDatabase(myDB.name, myDB.version, 'test', 100 * 1024 * 1024);myDB.db.transaction(function(tx) {    tx.executeSql('', [], function(tx, result) {          if(result.rows.length!=0){              //result.rows.item(i)          }    }, function(tx, error) {        console.log(error);    });})常用的SQL语句：
//新建表'CREATE TABLE IF NOT EXISTS 表名 (列名称1 PRIMARY KEY,列名称2 UNIQUE ,列名称3)'//删除表'DROP TABLE 表名'//清空表'DELETE FROM 表名'//删除条目'DELETE FROM 表名 WHERE 列名称1 = ? and 列名称2 = ?'//新增一条'INSERT INTO 表名 VALUES (?,?,?,?,?,?,?)' //为所有列添加值'INSERT INTO 表名 (列名称2,列名称4,列名称6) VALUES (?,?,?)' //为指定列添加值//批量增加insert into persons (id_p, lastname , firstName, city )values(200,'haha' , 'deng' , 'shenzhen'),(201,'haha2' , 'deng' , 'GD'),(202,'haha3' , 'deng' , 'Beijing')//更新一条'UPDATE 表名 SET 列名称1 = ? where 列名称2 = ? AND 列名称3 = ?''UPDATE 表名 SET 列名称1 = ?,列名称2 = ?,列名称3 = ? where 列名称2 = ? AND 列名称3 = ?' //根据主键存在与否，更新或添加一条数据'replace into 表名 (列名称1,列名称2,列名称3,列名称4,列名称5) VALUES (?,?,?,?,?) ' //查找（更多查询请根据自己的需要自由组合）'select * from 表名 where 列名称1 = ? and 列名称1 >= ?' //常规查找'select * from 表名 where 列名称1 = ? or 列名称1 >= ?' //常规查找'select * from 表名 ORDER BY ?' //指定排序项'select * from 表名 ORDER BY ? LIMIT 2;'//只查找符合条件的2条WHERE 列名称 IS NOT NULL //非空WHERE 列名称 LIKE "111%" //111开头的WHERE 列名称 LIKE "%111" //111结尾的WHERE 列名称 LIKE "%111%" //包含111的WHERE 列名称 NOT LIKE "%111%" //不包含111的'_a_'    //三位且中间字母是a的'_a'    //两位且结尾字母是a的'a_'    //两位且开头字母是a的WHERE 列名称 GLOB > 111 //大于111WHERE 列名称 GLOB >= 111 //大于等于111WHERE 列名称 GLOB != 111 //不等于111 WHERE 列名称 GLOB '111*' //111开头的WHERE 列名称 IN ( 25, 27 )  //值为25或27的WHERE 列名称 NOT IN ( 25, 27 )  //值不为25或27的WHERE 列名称 BETWEEN 25 AND 27  //值在25到27之间的WHERE 列名称 IN ( '25', '27' )  //注意:拼接sql时不要忘记引号//索引'CREATE INDEX IF NOT EXISTS 索引名 on 表名 (列名称1, 列名称2) ''DROP INDEX 索引名'


推荐阅读


上一篇：小满节气喝什么茶养生,女人要喝什么茶好

下一篇：什么茶清热利尿,小满节气喝什么茶养生