存储方式

浏览器存储,存储方式主要由三种:cookie、webStorage(localStorage和sessionStorage)indexedDB

cookie属于文档对象模型DOM树根节点document,而 webStorageindexedDB以及属于浏览器对象模型BOM的对象window

目的

Cookie诞生之初的作用就是解决HTTP的无状态请求,用来记录一些用户相关的一些状态。

缺点

h5之前,存储主要用cookies,缺点:

操作方式:

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/"    // 设置cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT"    // 删除cookie

设置cookie的方法比较简单,其中有几个参数可以添加

参数

key

cookie的key

value

cookie的值

expires

过期时间,当过了到期日期时,浏览器会自动删除该cookie,如果想删除一个cookie,只需要把它过期时间设置成过去的时间即可 比如希望设置过期时间一年:new Date().getTime() + 365 * 24 * 60 * 60 * 1000

如果不设置过期时间,则表示这个cookie生命周期为浏览器会话期间,只要关闭浏览器窗口,cookie就消失了。

path

路径,值可以是一个目录,或者是一个路径。

如果cc.com/test/index.html 建立了一个cookie,那么在cc.com/test/目录里的所有页面,以及该目录下面任何子目录里的页面都可以访问这个cookie。因此在cc.com/test/test2/test3 里的任何页面都可以访问cc.com/test/index.html建立的cookie。若cc.com/test/ 若想访问cc.com/test/index.html设置的cookes,需要把cookies的path属性设置成“/”。 在指定路径的时候,凡是来自同一服务器,URL里有相同路径的所有WEB页面都可以共享cookies。

domain

主机名,是指同一个域下的不同主机,例如:www.baidu.com和map.baidu.com就是两个不同的主机名。默认情况下,一个主机中创建的cookie在另一个主机下是不能被访问的,但可以通过domain参数来实现对其的控制:document.cookie = "name=value;domain=.baidu.com" 这样,所有*.baidu.com的主机都可以访问该cookie。

secure

当secure属性设置为true时,cookie只有在https协议下才能上传到服务器,而在http协议下是没法上传的,所以也不会被窃听。


webStorage(基于HTML5规范)

HTML5 提供了两种在客户端存储数据的新方法:localStorage和sessionStorage,挂载在window对象下。

webStorage是本地存储,数据不是由服务器请求传递的。从而它可以存储大量的数据,而不影响网站的性能。

目的

Web Storage的目的是为了克服由cookie带来的一些限制,当数据需要被严格控制在客户端上时,无须持续地将数据发回服务器。比如客户端需要保存的一些用户行为或数据,或从接口获取的一些短期内不会更新的数据,都可以利用Web Storage来存储。

localStorage

以键值对(Key-Value)的方式存储,永久存储,永不失效,除非手动删除。IE8+支持,每个域名限制5M

打开同域的新页面也能访问得到。可以存储数组、数字、对象等可以被序列化为字符串的内容

操作方式

window.localStorage.username = 'hehe'                   // 设置
window.localStorage.setItem('username', 'hehe')         // 设置
window.localStorage.getItem('username')                 // 读取
window.localStorage.removeItem('username')             // 删除
window.localStorage.key(1)                             // 读取索引为1的值
window.localStorage.clear()         

sessionStorage

sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存。很多时候数据只需要在用户浏览一组页面期间使用,关闭窗口后数据就可以丢弃了,这种情况使用sessionStorage就比较方便。

注意,刷新页面sessionStorage不会清除,但是打开同域新页面访问不到。

操作方式

window.sessionStorage.username = 'hehe'                   // 设置
window.sessionStorage.setItem('username', 'hehe')         // 设置
window.sessionStorage.getItem('username')                 // 读取
window.sessionStorage.removeItem('username')             // 删除
window.sessionStorage.key(1)                             // 读取索引为1的值
window.sessionStorage.clear()       


indexedDB

定义

indexedDB就是一个非关系型数据库,它不需要你去写一些特定的sql语句来对数据库进行操作,因为它是nosql的,数据形式使用的是json。IndexedDB很适合存储大量数据,它的API是异步调用的。

特点

  1. IndexedDB是一种低级API,用于客户端存储大量结构化数据。该API使用索引来实现对该数据的高性能搜索。
  2. 为应用创建离线版本。

操作方式

  1. 打开数据库并且开始一个事务。
  2. 创建一个 object store。
  3. 构建一个请求来执行一些数据库操作,像增加或提取数据等。
  4. 通过监听正确类型的 DOM 事件以等待操作完成。
  5. 在操作结果上进行一些操作(可以在 request 对象中找到)

基础API

建立打开indexdb:window.indexedDB.open("testDB")

关闭indexdb:indexdb.close();

删除indexdb:window.indexedDB.deleteDatabase(indexdb)。


Web SQL

作为html5本地数据库,可通过一套API来操纵客户端的数据库(关系数据库),他是已经被被W3C丢弃的规范,但被广泛支持。下面是支持浏览器情况。

操作

1.打开并创建连接

var dataBase = openDatabase("student", "1.0", "学生表", 1024 * 1024, function () { });

2.创建数据表

dataBase.transaction( function(tx) {
    tx.executeSql(
    "create table if not exists stu (id REAL UNIQUE, name TEXT)",
    [],
    function(tx,result){ alert('创建stu表成功'); },
    function(tx, error){ 
        alert('创建stu表失败:' + error.message);

    });
});    

3.添加数据

dataBase.transaction(function (tx) {
    tx.executeSql(
    "insert into stu (id, name) values(?, ?)",
    [1, '徐明祥'],
    function () { alert('添加数据成功'); },
    function (tx, error) { 
        alert('添加数据失败: ' + error.message);
    });
});

4.查询数据

dataBase.transaction(function (tx) {
    tx.executeSql(
    "select * from stu", [],
    function (tx, result) { //执行成功的回调函数
        //在这里对result 做你想要做的事情吧...........
    },
    function (tx, error) {
        alert('查询失败: ' + error.message)
    });
});


cookie和localstorage,sessionstorage以及的区别


cookie

localstorage

sessionStorage

IndexedDB

Web SQL

规范

HTTP规范

HTML5规范

HTML5规范

HTML5规范

已被W3C规范废弃,但浏览器广泛支持

挂载对象

DOM

BOM

BOM

BOM

BOM

传输

cookie数据始终在同源的http请求中携带(即使不需要)

仅在本地保存,不会传输

仅在本地保存,不会传输

仅在本地保存,不会传输

仅在本地保存,不会传输

存储大小

4k

5M左右,各浏览器的存储空间有差异

5M左右,各浏览器的存储空间有差异



有效期

在设置的cookie过期时间之前一直有效

始终有效,窗口或浏览器关闭也一直保存

仅在当前浏览器窗口关闭前有效

始终有效,窗口或浏览器关闭也一直保存

始终有效,窗口或浏览器关闭也一直保存

作用域

所有同源窗口中都是共享的

所有同源窗口中都是共享的

不在不同的浏览器页面中共享,即使是同一个页面

所有同源窗口中都是共享的

所有同源窗口中都是共享的

易用性

原生接口不友好,需要自己封装

Web Storage 提供api 接口,易用

Web Storage 提供api 接口,易用

提供了api 接口,易用

提供了api 接口,易用


https://cloud.tencent.com/developer/article/1356670

https://www.cnblogs.com/qiujianmei/p/10824682.html

http://www.w3school.com.cn/html5/html_5_webstorage.asp

https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Storage_API

请描述一下 cookies,sessionStorage 和 localStorage 的区别?前端HTML5几种存储方式的总结

详说 Cookie, LocalStorage 与 SessionStorage

https://www.jianshu.com/p/0b4c0274a35a