localStorage和sessionStorage本地存储 | 打卡每天一份劝退技能

末蓝、 2021-07-24 14:29 217阅读 0赞

大家好，我是**魔王哪吒**，很高兴认识你~~

哪吒人生信条：**如果你所学的东西 处于喜欢 才会有强大的动力支撑**。

每天学习编程，让你离梦想更新一步，感谢不负每一份热爱编程的程序员，不论知识点多么奇葩，和我一起，让那一颗四处流荡的心定下来，一直走下去，加油，`2021`加油！欢迎关注加我`vx:xiaoda0423`，欢迎点赞、收藏和评论

不要害怕做梦，但是呢，也不要光做梦，要做一个实干家，而不是空谈家，求真力行。

![f6ad02f71d9d0617986890c3518ba1ad.gif][]

## 前言 ##

如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，接收好挑战了吗？文章公众号首发，关注 **程序员哆啦A梦** 第一时间获取最新的文章

笔芯❤️~

![6f2de3107a2b7992302f73e025384a66.png][]

### 知识点 ###

使用`HTML5`中的`Web Storage API`， 可以在**客户端存储更多的数据**，，可以**实现数据在多个页面中共享甚至是同步**，对于复杂的数据，可以使用 Web SQL Database API 来实现。

掌握 `localStorage 和 sessionStorage` 存储方式， 存储 JSON 对象的数据， 使用 Web SQL Database 的基本操作。

### Web Storage ###

`Web Storage API` 的属性，方法，事件。

`cookie` 可用于传递少量的数据， 是一个在服务器和客户端 之间来回传送文本值的内置机制，服务器可以根据 `cookie` 追踪 用户在不同页面的访问信息。

`cookie` 的特点：

第一，**大小的限制**，cookie 的大小 限制 在 4KB 以内。

第二，**带宽的限制**，cookie 数据 会在服务器和浏览器 之间来回传送，所以访问哪个页面，都会消耗网络的带宽。

第三，**安全风险**，因为 cookie 会频繁在网络中传送， 所以在网络上是可见的，在不加密的情况下，是由安全风险的。

第四，**操作复杂**，在客户端的浏览器中，使用 JavaScript 操作 cookie数据是比较复杂的。

所以，如果对于**较小的数据**，并且需要**在服务器和客户端之间**频繁传送时，才有 cookie 存在的意义。

### 什么是 web storage ###

`Web Storage` 可以在客户端保存大量的数据，`Web Storage`本地存储的优势：

第一，存储容量大。

第二，零带宽。Web Storage 中的数据仅仅存储在本地，不会与服务器发生任何交互行为，不存在网络带宽的占用问题。

第三，编程接口。提供了一套丰富的接口，使得数据操作更加方便。

第四，独立的存储空间。每个域都有独立的存储空间，各个存储空间是完全能独立的，不会造成数据的混乱。

### localStorage 和 sessionStorage ###

在 `Web Storage` 本地存储 包括 `sessionStorage` 会话存储 和 `localStorage` 本地存储。

`cookie 和 session` 完全是服务器端可以操作的数据，`sessionStorage 和 localStorage` 完全是浏览器端操作的数据。

`cookie 和 session` 完全继承同一个 `Storage API`, 所以 `sessionStorage 和 localStorage` 的编程接口是一样的。

`sessionStorage 和 locatlStorage` 区别在于 数据存在**时间范围** 和 **页面范围**。

`sessionStorage`: 数据只**保存到存储它的窗口或标签关闭时**，数据在构建它们的窗口或标签内也可见

`localStorage`: 数据的生命周期比窗口或浏览器的生命周期长，数据可被同源的每个窗口或者标签共享。

### 监测是否支持 Web Storage ###

示例：

### 设置和获取Storage数据 ###

保存数据到`sessionStorage`：

window.sessionStorage.setItem("key”,"value");

`setItem()`表示保存数据的方法

从`sessionStorage`中获取数据：

value = window.sessionStorage.getItem("key");

`getItem()`为获取数据的方法

保存数据的写法：

window.sessionStorage.key = "value";

或

window.sessionStorage["key"] = "value"

获取数据的方法更加直接：

value = window.sessionStorage.key;

或

value = window.sessionStorage["key"]

### 使用sessionStorage 和 localStorage ###

示例：

function DaDa() {
     window.localStorage.setItem("localKey", "localVlaue");
     
     // 获取
     console.log(window.localStorage.getItem("localKey"));
     
     window.sessionStorage.setItem("sessionKey", "sessionValue");
     
     // 获取
     console.log(window.sessionStorage.getItem("sessionKey"));
    }

### Storage接口 ###

示例：

interface Storage{
     readonly attribute unsigned long length;
     DOMString ? key(unsigned long index);
     getter DOMString getItem(DOMString key);
     setter creator void setItem(DOMString key, DOMString value);
     deleter void removeItem(DOMString key);
     void clear();
    }

1.  `length`属性，表示当前`storage`对象中存储的键/值对的数量。

`Storage`对象是同源的，`length`属性只能反映同源的键/值对数量

1.  `key`方法，获取指定位置的键。
2.  `getItem`方法，根据键返回相应的数据值。
3.  `setItem`方法，将数据存入指定键对应的位置。
4.  `removeItem`方法，从存储对象中移除指定的键/值对。
5.  `clear`方法，清除`Storage`对象中所有的数据，如`Storage`对象是空的，则不执行任何操作。

### 使用Storage对象保存页面的内容 ###

示例：

// 保存数据到sessionStorage
    
    function SaveStorage(frm) {
     var storage = window.sessionStorage;
     
     storage.setItem("name",frm.name.value);
     
     storage.setItem("age", frm.age.value);
    }
    
    遍历显示sessionStorage中的数据
    
    function Show(){
     var storage = window.sessionStorage
     var result = "";
     for(var i=0; i<storage.length; i++){
      var key = storage.key(i);
      var value = storage.getItem(key);
      result += key + ":" + value + ";";
     }
    }

### 存储JSON对象的数据 ###

`Storage` 是以字符串保存数据的，所以在保存 `JSON` 格式的数据之前，需要把 `JSON` 格式的数据转化为字符串，这个操作叫**序列化**。

使用`JSON.stringify()`序列化`json`格式的数据为字符串数据:

var dada = JSON.stringify(jsonObject);

把数据反序列化为`JSON`格式：

var jsonObject = JSON.parse(stringData);

`web Storage`建立一套会在数据更新时触发的事件通知机制，无论监听的窗口是否存储过该数据，只要与执行存储的窗口是同源的，都会触发`web Storage`事件。

window.addEventListener("storage", EventHandle, true);

`StorageEvent`事件接口：

interface StorageEvent:Event {
     readonly attribute DOMString key;
     readonly attribute DOMString ? oldValue;
     readonly attribute DOMString ? newValue;
     readonly attribute DOMString ? url;
     readonly attribute Storage? storageArea;
    }

`key`属性：包含了存储总被更新或删除的键；`oldValue`属性：包含了更新前键对应的数据。

`newValue`属性：包含了更新后的数据；`url`属性：指向`Storage`事件的发生源。

`storageArea`属性：该属性是一个引用，指向值发生改变的`localStorage或sessionStorage`。

### web SQL Database ###

`Web SQL Database` 使用的是 SQLite 数据库，允许应用程序通过一个异步的 JavaScript 接口访问数据库。SQLite是一款轻型的数据库。

1.  `openDatabase()` 方法，使用现有的数据库或新建数据库来创建数据库对象。
2.  `transaction()` 方法，允许设计者控制事务的提交或回滚。
3.  `executeSql()` 方法，用于执行真实的SQL查询。

### 操作Web sql数据库 ###

var db = openDatabase("TestDB", "1.0", "测试", xxxx)

共5个参数：

1.  数据库名
2.  版本号
3.  数据库的描述
4.  数据库的大小
5.  创建回调函数

### 创建数据表 ###

`transaction()`方法用于进行事务处理，`executeSql()`方法用于执行sql语句。

创建数据表：

db.transaction(function (tx) {
     tx.executeSql('CREATE TABLE IF NOT EXISTS UserName (id unique, Name)');
    });

> `transaction()`方法传递给回调函数的tx是一个`transaction`对象，使用`transaction`对象的`executeSql()`方法可以执行SQL语句。

添加数据到数据表：

db.transaction(function (tx){
     tx.executeSql('INSERT INTO UserName (id,Name) VALUES(1,'dada'));
     tx.executeSql('INSERT INTO UserName (id,Name) VALUES (2,'dadada'));
    });

读取数据库中的数据：

db.transaction(function (tx){
     tx.executeSql('SELECT * FROM UserName', [], function(tx, resultes){
      var len = results.rows.length;
      for (var i=0; i<len; i++){
       console.log(results.rows.item(i).Name);
      }
     },null);
    });

### html5几种存储形式 ###

1.  本地存储-`localStorage, sessionStorage`
2.  离线缓存 `application cache`
3.  `indexedDB 和 webSQL`

### localStorage 和 sessionStorage ###

*  `localStorage`永久存储，永不失效除非手动删除
 *  `sessionStorage`浏览器重新打开后就消失了

大小，每个域名是`5`M，cookie第一是由大小限制，大概4K左右，第二，ie6域名下有个数限制。

### HTML API ###

在浏览器的API有两个，`localStorage和sessionStorage`

`window`对象中：`localStorage`对应`window.localStorage`，`sessionStorage`对应`window.sessionStorage`。

`localStorage`只要在相同的协议、相同的主机名、相同的端口下，就能读取或修改到同一份`localStorage`的数据。

`sessionStorage`比`localStorage`更严格，除了协议、主机名、端口外，**还要求在同一窗口下**

方法及含义：

setItem(‘key’,‘value’)	储存数据
    
    getItem(‘key’)	读取数据
    
    removeItem(‘key’)	删除数据
    
    clear()	清空数据

使用方法详解：

//储存数据
    window.localstage.setItem('key','value')
    // key : 数据的名称
    // value : 数据
    // 所存储的是数据必须是string类型
    
    //读取数据
    window.localstage.getItem('key')
    // key : 数据的名称
    // 如果数据不存在，返回null (一般用它做判断)
    
    //删除数据
    window.localstage.removeItem('key')
    // key : 数据的名称
    // 删除本地存储中的指定数据
    
    //清空数据
    window.localstage.clear()
    // 清空本地存储中的所有数据

### 什么是localStorage和sessionStorage？ ###

> `localStorage`(长期存储)、`sessionStorage`(会话存储)是`H5`中的本地`web`存储提供的两个接口, 相当于前端一个小型的本地数据库，用于在本地存储一些不敏感的数据，隶属于`window`对象。

### localStorage和sessionStorage的异同？ ###

相同点:两者的`API`完全相同，都是在浏览器端存储数据。

不同点:

1.  `localStorage`存储的数据是永久性数据,页面刷新，即使浏览器重启，甚至操作系统重启也不会丢失，并且存储的数据在同源（协议、域名、端口号一致）下的标签页和`window`窗口之间共享。
2.  `sessionStorage`存储的数据有些苛刻，页面刷新仍然有效,选项卡关闭时数据丢失。但是在相同标签页打开的多个`iframe`之间数据可以共享(同源的情况下)。

> 两者都是在浏览器端存储数据,`localStorage`存储的数据被限制在同源下,可跨窗口通信,不可跨浏览器,跨域；`sessionStorage`存储的数据被限制在标签页(页卡关闭丢失)。

### localStorage的局限 ###

局限:

1.各个浏览器的支持的大小不一样，业界认为是`5M`,并且在不同的浏览器不同版本支持度不一样

2.`localStorage`的数据不能被爬虫抓取

### 近期推荐 ###

*  [HTML5中的拖放功能][HTML5]
 *  [Vue.js笔试题解决业务中常见问题][Vue.js]
 *  [达达前端个人web分享92道JavaScript面试题附加回答][web_92_JavaScript]
 *  [【思维导图】前端开发-巩固你的JavaScript知识体系][-_JavaScript]
 *  [【图文并茂，点赞收藏哦！】重学巩固你的Vuejs知识体系][Vuejs]
 *  [连肝7个晚上，总结了计算机网络的知识点！（共66条）][7_66]

❤️关注+点赞+收藏+评论+转发❤️，原创不易，鼓励笔者创作更好的文章

## 点赞、收藏和评论 ##

我是`Jeskson`(达达前端)，感谢各位人才的：**点赞、收藏和评论**，我们下期见！(如本文内容有地方讲解有误，欢迎指出☞**谢谢，一起学习了**)

## 我们下期见！ ##

> 文章持续更新，可以微信搜一搜「 **程序员哆啦A梦** 」第一时间阅读，回复【资料】有我准备的一线大厂资料，本文 http://www.dadaqianduan.cn/\#/ 已经收录

> `github`收录，欢迎`Star`：[https://github.com/webVueBlog/WebFamily][https_github.com_webVueBlog_WebFamily]

[f6ad02f71d9d0617986890c3518ba1ad.gif]: /images/20210724/194c94618cb64a8b9e65c95d6cf7dae7.png
[6f2de3107a2b7992302f73e025384a66.png]: /images/20210724/90ed8a6bd1c0454fab0f5055e4436737.png
[HTML5]: https://juejin.cn/post/6922602775947771911
[Vue.js]: https://juejin.cn/post/6916664414422695949
[web_92_JavaScript]: https://juejin.cn/post/6913480482638266382
[-_JavaScript]: https://juejin.cn/post/6844904106243391495
[Vuejs]: https://juejin.cn/post/6844904117337341959
[7_66]: https://juejin.cn/post/6850037263116533773
[https_github.com_webVueBlog_WebFamily]: https://github.com/webVueBlog/WebFamily