HTML Storage-LocalStorage

  • 保存数据语法：
    localStorage.setItem("key", "value");
  • 读取数据语法：
    localStorage.getItem("key");
  • 删除数据语法：
    localStorage.removeItem("key");
  • 清空 localStorage
    localStorage.clear();
  • 获取键
    localStorage.key(i);
  • 监听 storageif (window.addEventListener) { window.addEventListener("storage", onStorageChange); } else if (window.attachEvent) { window.attachEvent("onstorage", onStorageChange); } function onStorageChange(e) {} storage 事件里的 e 是一个 StorageEvent 对象。 有如下属性
AttributeTypeFunctionkeyStringadded, removed, or moddifiedoldValueAnyold value,or null if a new item was addednewValueAnynew value,or null if a new item was removedurl/uriStringpage causing change
  • ipad 上的造成 storage 变化的页面的参数名是 uri
  • !!! 特别注意的是，该事件不在导致数据变化的当前页面触发。
  • 如果浏览器同时打开一个域名下面的多个页面，当其中的一个页面改变 sessionStorage 或 localStorage 的数据时，其他所有页面的 storage 事件会被触发，而原始页面并不触发 storage 事件。可以通过这种机制，实现多个窗口之间的通信。

localStorage 的局限

  2. 浏览器在 IE8 以上的 IE 版本才支持 localStorage 这个属性。
  3. 目前所有的浏览器中都会把 localStorage 的值类型限定为 string 类型。
  4. localStorage 本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。
  5. localStorage 不能被爬虫抓取到。
  6. 在 iPhone/iPad 上有时设置 setItem()时会出现诡异的 QUOTA_EXCEEDED_ERR 错误，这时一般在 setItem 之前，先 removeItem()就 ok 了。

查询是否支持 localStorage

if (!window.localStorage) {
  alert("浏览器不支持localstorage");
  return false;
} else {
  //主逻辑业务
}


localStorage 只能存储字符串

JSON
let data = {
  name: "white",
  age: 18,
};
window.localStorage.setItem("user", JSON.stringify(data));
JSON.parse(window.localStorage.getItem("user"));


Array
let arr = ["h", "e", "l", "l", "o"];
window.localStorage.setItem("array", arr.join(","));
window.localStorage.getItem("array").split(",");


HTML Storage-SessionStorage

  • 保存数据语法：
    sessionStorage.setItem("key", "value");
  • 读取数据语法：
    sessionStorage.getItem("key");
  • 删除数据语法：
    sessionStorage.removeItem("key");
  • 清空 localStorage
    sessionStorage.clear();
  • 获取键
    sessionStorage.key(i);
  • Chrome 浏览器，_blank 方式新开窗口，sessionStorage 存储的数据会丢失。
    解决方案：opener获取到源页面的部分控制权
    <a href="***" target="_blank" rel="opener noreferrer nofollow ugc">走</a>

应用场景

  2. 需求方要求用户在一个列表页浏览时，点击一个列表进入详情页，返回要求记录用户刚刚浏览的位置，而不是重新刷新页面到了页面顶部。（ps：如果用户好不容易翻到了第几十、几百乃至几千条时，难道要用户再重头开始？可能这个时候跳出率就高了）。
  2. 页面滚动，将滚动位置存到 session 中
  3. 再次进到页面中，到 session 中取出上次保存的浏览位置
  4. 滚动到对应位置
$(window).scroll(function () {
  if ($(document).scrollTop() != 0) {
    sessionStorage.setItem("offsetTop", $(window).scrollTop()); /*保存滚动位置*/
  }
});
/*onload时，取出并滚动到上次保存位置*/
window.onload = function () {
  var _offset = sessionStorage.getItem("offsetTop");
  $(document).scrollTop(offsetTop);
};

​

  2. 分页跳转时多选框中选中的值在跳转到第二页时数据无法保存
  2. 选中时往 sessionStorage 添加一条数据
  3. 取消选中时 sessionStorage 移除一条数据
  4. 提交时从 sessionStorage 遍历取出数据
 $('#tbody').on('click', '.ops', function() {//单个
    if($(this).is(':checked')) {
        var obj = {
            id: $(this).val(),
            name: $(this).data('name')
        };
        sessionStorage.setItem($(this).val(),JSON.stringify(obj));//将对象转为json字符串存储
    } else {
        sessionStorage.removeItem($(this).val());//当多选点击取消是移除session
    }
})
var len =sessionStorage.length;//获取session中值的长度,以便遍历
for(var i = 0; i< len; i++) {
    var key = sessionStorage.key(i);
    var sessionObj = JSON.parse(sessionStorage.getItem(key));
    ...
}
sessionStorage.clear();//数据处理完记得清空


HTML Storage-WebSQL

  2. openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。 openDatabase(db_name, version, describe, db_size, callback)
  • ​​callback​​ 会在创建数据库后被调用。
var db = openDatabase("mydb", "1.0", "Test DB", 2 * 1024 * 1024);
  1. transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
    db.transaction(function (tx) { tx.executeSql("CREATE TABLE IF NOT EXISTS LOGS (id unique, log)"); });
  2. executeSql：这个方法用于执行实际的 SQL 查询。tx.executeSql( sqlquery,[],dataHandler,errorHandler )
  • 执行executeSql后，dataHandler回调函数中有一个参数result。其数据类型为 SQLResultSet 。
  • SQLResultSet{insertId [long], rowsAffected [long], rows[SQLResultSetRowList]}
  • insertId：是执行插入操作时，表示数据第几个插入到表中，插入多个数据时，返回最后一个数据对应的序号
  • rowsAffected：表示被影响的行数，例如，执行更新操作，更新了一个数据，那么它为1
  • rows：返回一个 SQLResultSetRowList 类型的数据。SQLResultSetRowList{length [long], item}
  • 创建表
    db.transaction(function (tx) { tx.executeSql("CREATE TABLE IF NOT EXISTS LOGS (id unique, log)"); });
  • 删除表
    db.transaction(function (tx) { tx.executeSql("DROP TABLE LOGS",[],function(){ alert('DROP TABLE SUCCEED'); },function(){ alert('DROP　TABLE FAILED'); }); });

插入数据

db.transaction(function (tx) {
  tx.executeSql("INSERT INTO LOGS (id,unique,log) VALUES (?, ?, ?)", [ e_id, e_unique, e_log, ]);
});

查询数据

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++) {
        alert(results.rows.item(i).log);
      }
    }, null );
});

删除数据

db.transaction(function (tx) {
  tx.executeSql("DELETE FROM LOGS WHERE id=?", [id]);
});

更新数据

db.transaction(function (tx) {
  tx.executeSql("UPDATE LOGS SET log='www.w3cschool.cc' WHERE id=?", [id]);
});

是否支持WebSQL

if (window.openDatabase) { // 操作 web SQL        
} else {
     alert('当前浏览器不支持 webSQL !!!');
}


W3C规范

链接： ​​https://www.w3.org/TR/webdatabase/#dom-sqltransaction-sync-executesql​​

該規範不再處於積極維護中，Web 應用程序工作組不打算進一步維護它。

特点

  • 有更大的存储空间（可自定义设置），跨域读写，存储结构自由等特点。
  • 关闭窗口不会自动清除
  • 数据存储以表格形式而不是键值对