本地存储——LocalStorage , SessionStorage , WebSQL

HTML Storage-LocalStorage

  • 保存数据语法：

    localStorage.setItem("key", "value");

  • 读取数据语法：

    localStorage.getItem("key");

  • 删除数据语法：

    localStorage.removeItem("key");

  • 清空 localStorage

    localStorage.clear();

  • 获取键

    localStorage.key(i);

  • 监听 storage

    if (window.addEventListener) {
  window.addEventListener("storage", onStorageChange);
} else if (window.attachEvent) {
  window.attachEvent("onstorage", onStorageChange);
}
function onStorageChange(e) {}

    storage 事件里的 e 是一个 StorageEvent 对象。 有如下属性

    Attribute Type Function
    key String added, removed, or moddified
    oldValue Any old value,or null if a new item was added
    newValue Any new value,or null if a new item was removed
    url/uri String page causing change
    • ipad 上的造成 storage 变化的页面的参数名是 uri
    • !!! 特别注意的是，该事件不在导致数据变化的当前页面触发。
      • 如果浏览器同时打开一个域名下面的多个页面，当其中的一个页面改变 sessionStorage 或 localStorage 的数据时，其他所有页面的 storage 事件会被触发，而原始页面并不触发 storage 事件。可以通过这种机制，实现多个窗口之间的通信。

localStorage 的局限

  1. 浏览器在 IE8 以上的 IE 版本才支持 localStorage 这个属性。
  2. 目前所有的浏览器中都会把 localStorage 的值类型限定为 string 类型。
  3. localStorage 本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。
  4. localStorage 不能被爬虫抓取到。
  5. 在 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>

应用场景

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

原文链接： https://blog.csdn.net/oaa608868/article/details/53539954

  1. 分页跳转时多选框中选中的值在跳转到第二页时数据无法保存
    1. 选中时往 sessionStorage 添加一条数据
    2. 取消选中时 sessionStorage 移除一条数据
    3. 提交时从 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

  1. openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
    openDatabase(db_name, version, describe, db_size, callback)

    • callback 会在创建数据库后被调用。
    var db = openDatabase("mydb", "1.0", "Test DB", 2 * 1024 * 1024);

  2. transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。

    db.transaction(function (tx) {
  tx.executeSql("CREATE TABLE IF NOT EXISTS LOGS (id unique, log)");
});

  3. executeSql：这个方法用于执行实际的 SQL 查询。

    tx.executeSql( sqlquery,[],dataHandler,errorHandler )

    • 执行executeSql后，dataHandler回调函数中有一个参数result。其数据类型为 SQLResultSet 。

    • SQLResultSet

      • insertId：是执行插入操作时，表示数据第几个插入到表中，插入多个数据时，返回最后一个数据对应的序号
      • rowsAffected：表示被影响的行数，例如，执行更新操作，更新了一个数据，那么它为1
      • rows：返回一个 SQLResultSetRowList 类型的数据。SQLResultSetRowList

    • 创建表

      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 應用程序工作組不打算進一步維護它。

特点

  • 有更大的存储空间（可自定义设置），跨域读写，存储结构自由等特点。
  • 关闭窗口不会自动清除
  • 数据存储以表格形式而不是键值对
posted @ 2021-10-23 15:09  ~LemonWater  阅读(175)  评论(0)    收藏  举报