Client-Side Data Storage-O'Reilly 2016（读书笔记）: 这本书内容太弱了

Client-Side Data Storage

介绍

1. 这里的Client-Side指的还是Web开发，不是移动App的native端
2. 缺点
   1. 没有同步支持
   2. 容量限制
   3. 不能代替完全的数据库服务器

Cookies

1. document.cookie = "name=Raymond; expires=Fri, 31 Dec 9999 23:59:59 GMT; domain=app.foo.com";
   1. 删除：document.cookie = "name=Raymond; expires=Thu, 01 Jan 1970 00:00:00 GMT"; //设置过期时间为以前的时间
2. https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

Web（Local） Storage

1. localStorage.setItem["something"] = 1 //这语法倒也蛮奇怪的
2. names=[...]; localStorage.setItem("names", names); //name-value只支持字符串
   1. localStorage.setItem("names", JSON.stringify(names));
   2. var storedNames = JSON.parse(localStorarge.getItem("names"));
3. $(window).on("storage", function(e) { ... }); //e.originalEvent.newValue

IndexDB

1. var openRequest = indexedDB.open("ora_idb1",1);
2. 创建Object Stores
   1. openRequest.onupgradeneeded = function(e) {

      var thisDB = e.target.result;

      if(!thisDB. objectStoreNames.contains("firstOS"))

      thisDB. createObjectStore("firstOS");

3. 定义主键
   1. somedb.createObjectStore("people", {keyPath: "email"});
   2. somedb.createObjectStore("logs", {keyPath: "id", autoIncrement:true});
4. 定义索引
   1. bjectStore.createIndex("name of index", "path", options); //大部分情况下前2个参数取相同的值
   2. objectStore.createIndex("gender", "gender", {unique:false}); //这个方法从RDBMS的角度来看有点原始？
5. 操作数据
   1. wrap以事务
      1. var transaction = db.transaction(["people"],"readwrite");
      2. var store = transaction.objectStore("people");
      3. var request = store.add(person);
      4. request.onsuccess = function(e) { ... } //所有的操作都是异步的？异步+ACID？？
   2. 读事务
      1. var transaction = db.transaction(["people"],"readonly");
      2. ...
      3. var request = store.get(key);
      4. request.onsuccess = function(e) {

         var result = e.target.result; //这个2级.号语法有点诡异

         • //如果试图获取一个不存在的对象，onsuccess回调仍然会执行
   3. 更新（嗯？API区分了2种写操作：创建与更新？）
      1. var request = store.put(person);
   4. 删除：var request = store.delete(key);
   5. 获取全部数据？
      1. var cursor = objectStore.openCursor();
      2. cursor.onsuccess = function(e) {

         var res = e.target.result;

         ...

         res.continue(); //触发游标移动到下一个数据？

   6. Ranges：范围就是对索引的过滤
      1. range = IDBKeyRange.upperBound("Camden"); //key必须<"Camden"
      2. cursor = someIndex.openCursor(range);
   7. objectStore.createIndex("hobbies", "hobbies", {unique:false, multiEntry:true});
      • hobbies属性的取值是一个array，so？把数组中的每一个加入到索引中去？？——这API感觉还是有点原始~
   8. 计数：
      1. db.transaction(["note"],"readonly").objectStore("note").count().onsuccess = ...

• IndexDB是对客户端数据库（简化版的关系数据库）的一个很好的抽象吗？我不这么认为
  • 但是这里注意IndexDB至少提供了一个快速索引能力。。。

Web SQL

1. Dead Spec Walking
   1. 其实Web SQL就是对SQLite的JS API绑定
2. db = window.openDatabase("db1", "1", "Database 1", 5*1024*1024);
3. db.readTransaction(function to do stuff, error handler, success handler); //这个API居然不是Promise风格的
   1. function(tx) { tx.executeSql("select * from foo"); }
4. 写事务：（这里怎么直接拼sql语句了？）

库

1. Lockr, a wrapper for Web Storage
   1. 这种封装没有必要吧？无聊
2. Simplifying IndexedDB with Dexie
   1. 有Promise化的API封装
3. localForge
   1. localforage.setItem("name", value, function(err, value) {});
      • Promise版本：localforage.setItem("name", value).then(function(value) { });
4. http://pouchdb.com/ 支持数据同步？？？

构建样例应用