前端存储的那些事

RegularEmployee

已于 2023-06-09 15:40:16 修改

阅读量341

点赞数

分类专栏： vue3专栏文章标签：前端

于 2023-06-09 15:36:27 首次发布

本文链接：https://blog.csdn.net/m0_52526748/article/details/131128154

版权

vue3专栏专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、前端常用的四种存储方式对比

	容量	生命周期	通信
cookie	4KB	可以设置	每次发送请求都会携带在header中
localStorage	5M	永久（需要手动清除）	不参与
sessionStorage	5M	仅在当前对话保留	不参与
indexedDB	不限	永久（需要手动清除）	不参与

二、四种存储方式的区别

2.1、`cookie`

2.1.1、定义

1.Cookie 是一些数据, 存储于你电脑上的文本文件中。

2.当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

3.Cookie 的作用就是用于解决 "如何记录客户端的用户信息":

（1）当用户访问 web 页面时，他的名字可以记录在 cookie中。

（2）在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

2.1.2、使用

1.Cookie 以名/值对形式存储：username = Cheng Dong

2.使用JavaScript中的document.cookie属性来创建、读取、及删除 cookie

3.创建：

（1）一般写法：document.cookie= "username = Cheng Dong"

（2）添加过期时间expires表示过期时间，一般情况关闭浏览器就会自动清楚Cookie：

document.cookie = "username = Cheng Dong; expires=Thu, 18 Dec 2043 12:00:00 GMT";

（3）设置path参数告诉浏览器 cookie的路径。默认情况下，cookie 属于当前页面

document.cookie = "username = Cheng Dong; expires=Thu, 18 Dec 2043 12:00:00 GMT；path=/";

4.读取：var uName = document.cookie

5.修改：document.cookie= "username = Cheng Dong One"

6.删除：

（1）一般情况关闭浏览器就会自动清除cookie

（2）修改过期时间也可以清除cookie

document.cookie = "username = Cheng Dong; expires=Thu, 18 Dec 2023 12:00:00 GMT";

2.2、`localStorage`

2.2.1、定义

1.localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。

2.localStorage 属性是只读的。

3.localStorage 中的键值对总是以字符串的形式存储，对于对象、整数 key 值会自动转换成字符串形式。

2.2.2、使用

1.语法：Windows.localStorage

2.保存数据语法：Windows.localStorage.setItem("key","value")

3.读取数据语法：var lastname = Windows.localStorage.getItem("key")

4.删除数据语法：localStorage.removeItem("key")

5.删除所有项的语法：localStorage.clear()

<el-button @click="save">保存</el-button>
<el-button @click="edit">编辑</el-button>
<el-button @click="delete">删除</el-button>

methods:{
    const save = ()=>{
       this.form = {
           id:"1";
           name:"张三";
           age:19;
       },
       Windows.localStorage.setItem("formData",this.form);
    },
    const edit = ()=>{
       var data = Windows.localStorage.getItem("formData");
       // const { id,name,age } = data;
       // this.form.id = id;
       // this.form.name = name;
       // this.form.age = age;
       this.form = {...this.form, ...data}
    },
    const delete = ()=>{
       localStorage.removeItem("formData");
    }
}

2.3、`sessionStorage`

2.3.1、定义

1.sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

2.sessionStorage当⻚⾯关闭后会被清理，它是会话级别的储存⽅式，会话结束时会被清除

2.3.2、使用

1.语法：Windows.sessionStorage

2.保存数据语法：Windows.sessionStorage.setItem("key","value")

3.读取数据语法：var lastname = Windows.sessionStorage.getItem("key")

4.删除数据语法：sessionStorage.removeItem("key")

5.删除所有项的语法：sessionStorage.clear()

注：sessionStorage和localStorage写法相似

2.4、`IndexedDB`

2.4.1、定义

1.IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。

2.IndexedDB 执行的操作是异步执行的，以免阻塞应用程序。

2.4.2、使用

1.IndexedDB基本模式如下

（1）打开数据库。

（2）在数据库中创建一个对象仓库（object store）。

（3）启动一个事务，并发送一个请求来执行一些数据库操作，像增加或提取数据等。

（4）通过监听正确类型的 DOM 事件以等待操作完成。

（5）在操作结果上进行一些操作（可以在 request 对象中找到）

1.打开MyTestDatabase数据库
var request = window.indexedDB.open("MyTestDatabase",version);
注：open()有两个参数：
（1）一个是数据库名字，另一个是数据库版本号。
（2）版本号是无符号很长很长的数字，不能是浮点数，否则它将会被转变成离它最近的整数，就不能触发onupgradeneeded 事件
2.生成处理函数
var db;
var request = window.indexedDB.open("MyTestDatabase");
request.onerror = function(event) {
    alert("信息错误")
};
request.onsuccess = function(event) {
    db = event.target.result;
};
3.创建对象仓库
// 该事件仅在较新的浏览器中实现了
request.onupgradeneeded = function(event) {
// 保存 IDBDataBase 接口
var db = event.target.result;
// 为该数据库创建一个对象仓库
var objectStore = db.createObjectStore("name", { keyPath: "myKey" });
// 创建索引，在后面查询数据的时候可以根据索引查
 objectStore.createIndex("link", "link", { unique: false }); 
 objectStore.createIndex("sequenceId", "sequenceId", { unique: false });
 objectStore.createIndex("messageType", "messageType", { unique: false });
};
4.插入数据
var request = db.transaction([storeName], "readwrite").objectStore(storeName).add(data);

  request.onsuccess = function (event) {
    console.log("数据写入成功");
  };

  request.onerror = function (event) {
    console.log("数据写入失败");
  };
5.读取数据
 var transaction = db.transaction([storeName]); // 事务
 var objectStore = transaction.objectStore(storeName); // 仓库对象
 var request = objectStore.get(key); // 通过主键获取数据

    request.onerror = function (event) {
      console.log("事务失败");
    };

    request.onsuccess = function (event) {
      console.log("主键查询结果: ", request.result);
      resolve(request.result);
    };
6.删除数据
let deleteRequest = window.indexedDB.deleteDatabase("MyTestDatabase");
  deleteRequest.onerror = function (event) {
    console.log("删除失败");
  };
  deleteRequest.onsuccess = function (event) {
    console.log("删除成功");
  };
  7.修改数据
  var request = db.transaction([storeName], "readwrite").objectStore(storeName).put(data);

  request.onsuccess = function () {
    console.log("数据更新成功");
  };

  request.onerror = function () {
    console.log("数据更新失败");
  };
  8.查找数据
  8.1通过索引查找数据，indexValue索引值，indexName索引名称
  var store = db.transaction(storeName, "readwrite").objectStore(storeName);
  var request = store.index(indexName).get(indexValue);
  request.onerror = function () {
    console.log("事务失败");
  };
  request.onsuccess = function (e) {
    var result = e.target.result;
    console.log("索引查询结果：", result);
  };
  8.2通过游标查询数据
  let list = [];
  var store = db.transaction(storeName, "readwrite").objectStore(storeName);
  var request = store.openCursor(); // 指针对象
  // 游标开启成功，逐行读数据
  request.onsuccess = function (e) {
    var cursor = e.target.result;
    if (cursor) {
      // 必须要检查
      list.push(cursor.value);
      cursor.continue(); // 遍历了存储对象中的所有内容
    } else {
      console.log("游标读取的数据：", list);
    }
  };
  8.3通过游标河索引一起查找数据
   let list = [];
  var store = db.transaction(storeName, "readwrite").objectStore(storeName); // 仓库对象
  var request = store.index(indexName).openCursor(IDBKeyRange.only(indexValue)); 
  request.onsuccess = function (e) {
    var cursor = e.target.result;
    if (cursor) {
      // 必须要检查
      list.push(cursor.value);
      cursor.continue(); // 遍历了存储对象中的所有内容
    } else {
      console.log("游标索引查询结果：", list);
    }
  };
  request.onerror = function (e) {};

2.使用场景

（1）基于客户端需要存储大量数据

（2）数据可视化

（3）即时聊天工具，大量消息需要存在本地

（4）其它存储方式容量不满足时，不得已使用IndexedDB

3.IndexedDB的特点

（1）非关系型数据库（NoSql）

MySql是关系型数据库，是以一张二维表的形式存储存储

IndexedDB是非关系型数据库，是以键值对的形式存储

（2）持久化存储

cookie、localStorage、sessionStorage等方式存储的数据，当我们清除浏览器以后，就会被删除

（3）IndexedDB形式存储的数据，除非手动删除数据库，否则会永久保存

（4）存储容量大

（5）同源策略

RegularEmployee

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端存储的那些事

Cookie是一些数据, 存储于你电脑上的文本文件中。2.当web服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。3.Cookie的作用就是用于解决 "如何记录客户端的用户信息":（1）当用户访问web页面时，他的名字可以记录在cookie中。（2）在用户下一次访问该页面时，可以在cookie中读取用户访问记录。1.用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。属性是只读的。中的键值对总是以字符串的形式存储，对于对象、整数key。
复制链接

扫一扫