asp网站数据库连接,wordpress数据库加速插件,济南比较好的网站开发公司,网站设计拓扑图如今主流的存储方案#xff1a;
cookieweb storageindexDB
这三个浏览器兼容性最高的三种前端储存方案
1、cookie
它的出现是为了解决 HTTP 协议无状态特性的问题#xff0c;简单来说就是想要得到上次http请求的数据是办不到的#xff0c;只有再次从新请求。我们见得最多…如今主流的存储方案
cookieweb storageindexDB
这三个浏览器兼容性最高的三种前端储存方案
1、cookie
它的出现是为了解决 HTTP 协议无状态特性的问题简单来说就是想要得到上次http请求的数据是办不到的只有再次从新请求。我们见得最多的应该就是登录态的长久保持。
虽然 Cookie 在部分领域仍有不可替代的价值但其已经不再适合被做为一个前端本地储存方案去使用
Cookie 在每次请求中都会被发送如果不使用 HTTPS 并对其加密其保存的信息很容易被窃取导致安全风险cookie在每次请求时都会自动写入到请求头内会增加带宽占用但其实放在今天的网络环境来看这点占用基本可以忽略不计Cookie 只允许储存 4kb 的数据 假设 abc.com 和 xyz.com 都内嵌了淘宝的广告你会发现即使 abc.com 和 xyz.com 所有者不一致两个网站上淘宝广告推荐的商品也出奇的一致这背后是因为淘宝知道是同一个人分别在 abc.com 和 xyz.com 访问淘宝的广告
这是如何实现的呢答案是第三方 Cookie
它是如何工作的呢
当用户处于 abc.com 时浏览器会向 taobao.com/some-ads 发起一个 HTTP 请求当淘宝服务器返回广告内容时会顺带一个 Set-Cookie 的 HTTP 请求头告诉浏览器设置一个源为 taobao.com 的 Cookie里面存上当前用户的 ID 等信息这个 Cookie 相对于 abc.com 而言就是第三方 Cookie因为它属于 taobao.com而当用户访问 xyz.com 时由于 xyz.com 上也嵌入了淘宝的广告因此用户的浏览器也会向 taobao.com/some-ads 发起请求有意思的来了发请求时浏览器发现本地已有 taobao.com 的 Cookie此前访问 abc.com 时设置的因此浏览器会将这个 Cookie 发送过去淘宝服务器根据发过来的 Cookie发现当前访问 xyz.com 的用户和之前访问 abc.com 的用户是同一个因此会返回相同的广告
广告商用第三方 Cookie 来跨站定位用户大概就是这么个过程实际肯定要复杂许多但基本原理是一致的。
补充浏览器在发送请求时何时会自动带上cookie
Set-Cookie响应头字段Response header是服务器发送到浏览器或者其他客户端的一些信息一般用于登陆成功的情况下返回给客户端的凭证信息然后下次请求时会带上这个cookie这样服务器端就能知道是来自哪个用户的请求了。
Cookie请求头字段是客户端发送请求到服务器端时发送的信息满足一定条件下浏览器自动完成无需前端代码辅助。 拿一个Http POST请求来说 http://aaa.www.com/xxxxx/list
如果满足下面几个条件
1、浏览器端某个Cookie的domain字段等于aaa.www.com或者www.com
2、都是http或者https或者不同的情况下Secure属性为false
3、要发送请求的路径即上面的xxxxx跟浏览器端Cookie的path属性必须一致或者是浏览器端Cookie的path的子目录比如浏览器端Cookie的path为/test那么xxxxxxx必须为/test或者/test/xxxx等子目录才可以
上面3个条件必须同时满足否则该Post请求就不能自动带上浏览器端已存在的Cookie
HttpOnly 则用来禁止使用 JS 访问 cookie很好的可以防止xss攻击。
2、Web Storage HTML5 标准中新增了一个 Web Storage 的本地储存方案其包括
LocalStorageSessionStorag
两者用法一致相比于cookie,存储容量增加到了5M之多区别点
localstorage是持久化存储除非自己手动删除关闭浏览器后依然存在而sessionstorage关闭浏览器后自动删除。localstorage作用范围是整个浏览器简单来说只要是用同一个浏览器打开的不同窗口还是不同网页之间都能够共享数据而sessionstorage只能在同一个窗口下共享数据。 这里主要以 LocalStorage 为例进行介绍
主要特点
使用 Key-Value 形式储存使用很方便Key 和 Value 以字符串形式储存
使用方法
localStorage.setItem(键,值)//存值
localStorage.getItem(键) //取值
localStorage.removeItem(键)//删除某个值
localStorage.clear()//清空所有
缺点
只能存入字符串数据类型无法直接存对象......
举个
localStorage.setItem(key, {name: value});
console.log(localStorage.getItem(key)); // [object, Object]localStorage.setItem(key, 1);
console.log(localStorage.getItem(key)); // 1
你会发现存进去的如果是对象拿出来就变成了字串‘[Object,object]’数据丢失了
存进去的如果是 number拿出来也变成了 string
要解决这个问题一般是使用 JSON.stringify() 配合 JSON.parse()。
但是这么做有一个缺点那就是 JSON.stringify() 本身是存在一些问题的 const a JSON.stringify({a: undefined,b: function(){},c: /abc/,d: new Date()
});
console.log(a) // {c:{},d:2022-02-02T19:40:12.346Z}
console.log(JSON.parse(a)) // {c: {}, d: 2022-02-02T19:40:12.346Z}
如上JSON.stringify() 无法正确转换 JS 的部分属性
undefiendFunctionRegExp正则表达式转换后变成了空对象Date转换后变成了字符串而非 Date 类的对象
其实还有个 Symbol 也无法被转换但由于 Symbol 本身定义全局唯一性就决定了它不应该被转换否则即使转换回来也不会是原来那个 Symbol
Function 也比较特殊不过要兼容的话可以先调用 .toString() 转换为字符串储存需要的时候再 eval 转回来 3、indexedDB
IndexedDB 的全称是 Indexed Database从名字中就可以看出它是一个数据库
IndexedDB 早在 2009 年就有了第一次提案但其实它和 Web Storage 几乎是同一时间普及到各大浏览器的。IndexedDB 是一个正经的数据库它在问世后替代了原来不正经的 Web SQL 方案成为了当今唯一运行在浏览器里的数据库
在我看来IndexedDB 其实更适合当作终极前端本地数据储存方案
相比于 LocalStorageIndexedDB 的优点是
储存量理论上没有上限 Chrome 对 IndexedDB 储存空间限制的定义是硬盘可用空间的三分之一
所有操作都是异步的相比 LocalStorage 同步操作性能更高尤其是数据量较大时原生支持储存 JS 的对象是个正经的数据库意味着数据库能干的事它都能干
但是缺点也比较致命
操作非常繁琐本身有一定门槛需要你懂数据库的概念
对于简单的数据储存而言IndexedDB 的 API 显得太复杂了再加上其 API 全是异步的会带来额外的心智负担远没有 LocalStorage 简单两行代码搞定数据存取来的快
因此IndexedDB 在今天的使用规模相比 LocalStorage 差远了即使 IndexedDB 本身的设计其实更适合用来在浏览器上储存数据
总之如果不考虑 IndexedDB 的操作难度其作为一个前端本地储存方案其实是接近完美的 indexedDB的使用
详细文档 IndexedDB API - JavaScript 教程 - 网道
使用 IndexedDB 的第一步是打开数据库
const version 1;
const request window.indexedDB.open(studentdb,version);
上面这个操作打开了名为 studentdb 的数据库如果不存在浏览器会自动创建。IndexedDB 有一个版本version的概念连接数据库时就可以指定版本。
然后 request 上有四个事件
var db; // 全局 IndexedDB 数据库实例request.onupgradeneeded function (event) {db event.target.result;//得到实例console.log(version change);
};request.onsuccess function (event) {db request..target.result;console.log(db connected);
};request.onblocked function (event) {console.log(db request blocked!)
}request.onerror function (event) {console.log(error!);
};
触发事件时机
onupgradeneeded 在版本改变时触发 注意首次连接数据库时版本从 0 变成 1因此也会触发且先于 onsuccess
onsuccess 在连接成功后触发onerror 在连接失败时触发onblocked 在连接被阻止的时候触发比如打开版本低于当前存在的版本
注意这四个事件都是异步的意味着在连接 IndexedDB 的请求发出去后需要过一段时间才能连上数据库并进行操作
开发者对数据库的所有操作都得放在异步连上数据库之后这有的时候会带来很大的不便。
新建表
新建数据库与打开数据库是同一个操作。如果指定的数据库不存在就会新建。不同之处在于后续的操作主要在upgradeneeded事件的监听函数里面完成因为这时版本从无到有所以会触发这个事件。
通常新建数据库以后第一件事是新建对象仓库 ObjectStore即新建表。
request.onupgradeneeded function(event) {db event.target.result;var objectStore db.createObjectStore(person, { keyPath: id,autoIncrement: true // 自增整数 });
}
其中person为表名id为你设置的表的主键。 更好的写法是先判断一下这张表格是否存在如果不存在再新建。
if (!db.objectStoreNames.contains(person)) {objectStore db.createObjectStore(person, { keyPath: id });
} 新建对象仓库以后下一步可以新建索引。
request.onupgradeneeded function(event) {db event.target.result;var objectStore db.createObjectStore(person, { keyPath: id });objectStore.createIndex(name, name, { unique: false });objectStore.createIndex(email, email, { unique: true });
}
上面代码中IDBObject.createIndex()的三个参数分别为索引名称、索引所在的属性、配置对象说明该属性是否包含重复的值。
添加数据
db.transaction(person, readwrite).objectStore(person).add({ id: 1, name: 张三, age: 24, email: zhangsanexample.com });
写入数据需要新建一个事务。新建时必须指定表格名称和操作模式“只读”或“读写”。新建事务以后通过IDBTransaction.objectStore(name)方法拿到 IDBObjectStore 对象再通过表格对象的add()方法向表格写入一条记录。
数据形式如图所示
直接添加数据未添加索引 添加了索引 获取数据
如果要获取数据需要一个 readonly 的 Transaction
const request db.transaction(person, readonly).objectStore(person).get(2);
objectStore.get()方法用于读取数据参数是主键的值。 读写操作是一个异步操作通过监听事物对象的success事件和error事件了解是否写入成功。
request.onsuccess function (event) {console.log(数据写入/读取成功);
};request.onerror function (event) {console.log(数据写入/读取失败);
}
遍历数据表
遍历数据表格的所有记录要使用指针对象 IDBCursor。
objectStore.openCursor().onsuccess function (event) {var cursor event.target.result;if (cursor) {console.log(Id: cursor.key);console.log(Name: cursor.value.name);cursor.continue();} else {console.log(没有更多数据了);}
};
新建指针对象的openCursor()方法是一个异步操作所以要监听success事件。
更新和删除数据
var request db.transaction([person], readwrite)//更新
request.objectStore(person).put({ id: 1, name: 李四, age: 35, email: lisiexample.com });
//删除
request.objectStore(person).delete(1);
使用索引
索引的意义在于可以让你搜索任意字段也就是说从任意字段拿到数据记录。如果不建立索引默认只能搜索主键即从主键取值。
即查找person表中索引name中名为张三的数据
var request db.transaction([person], readwrite).objectStore(person).index(name).get(张三) 以上就是indexedDB的基本操作更多说明查看文档。
综上哪怕只是想简单的往 IndexedDB 里增加和查询数据都需要写一大堆代码操作非常繁琐一不小心还容易掉坑里 4、GoDB.js
GoDB.js 是一个基于 IndexedDB 实现前端本地储存的类库
帮你做到代码更简洁的同时更好的发挥 IndexedDB 的实力
首先安装
npm install godb
对 IndexedDB 的增删改查一行代码就可以搞定
import GoDB from godb;const testDB new GoDB(testDB); // 连接数据库
const user testDB.table(user); // 获取数据表const data { name: luke, age: 22 }; // 随便定义一个对象user.add(data) // 增.then(luke user.get(luke.id)) // 查.then(luke user.put({ ...luke, age: 23 })) // 改.then(luke user.delete(luke.id)); // 删
可以参考 GoDB 的项目官网https://godb-js.github.io/ 5、localForage推荐
这是目前对indexedDB封装中最火热的类库目前在github上的 star已经23.3k了。
它不仅极大的降低了用户心智负担还具有良好的兼容性。而且他还有一个优雅降级策略若浏览器不支持 IndexedDB 则使用 WebSQL 如果不支持 WebSQL 则使用 localStorage在所有主流浏览器中都可用。
另外能存储多种类型的数据支持es6的 Promises API,而且支持添加回调函数。
localForage的使用
下载
npm install localforage
创建一个indexedDB
const myIndexedDB localforage.createInstance({name: myIndexedDB,})
数据存取
由于indexedDB的存取都是异步的建议使用 promise.then() 或 async/await 去读值
//存值
myIndexedDB.setItem(key, value)//取值
myIndexedDB.getItem(somekey).then(function (value) {// we got our value
}).catch(function (err) {// we got an error
});
orconst value await myIndexedDB.getItem(somekey);
其他常用方法
removeItem:删除key对应的值。clear删除所有的key并且重置数据库。length:获取仓库中key的长度。keys获取数据仓库中所有的key。iterate:迭代数据库中所有的键值对如果有一个value是undefined就会推出并且将 该键传入成功回调内。 配置相关API
setDriver用来选择驱动或者配置数据库应该放在第一个调用数据API之前调用。 默认情况下localForage会按照以下的顺序选择数据仓库的后后端驱动。1. IndexedDB2. WebSQL3. localStorage config:见词思意用来配置localForage的API在调用localForage之前必须先调用此方法设置的任何值都将保留属性较多案例详解。
localforage.config({// 将数据库从 “localforage” 重命名为 “Hipster PDA App”name: Hipster PDA App// 配置不同的驱动优先级driver: [localforage.WEBSQL,localforage.INDEXEDDB,localforage.LOCALSTORAGE],//size数据库的大小以字节为单位。现在只用于WebSQL。 默认值4980736 size:100000,//version将来用来升级version1.0
});
