公司的图片、视频和文件是如何存储的

最新推荐文章于 2024-12-18 20:42:37 发布

楚门的kb世界

最新推荐文章于 2024-12-18 20:42:37 发布

阅读量1.1k

点赞数 26

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

本文链接：https://blog.csdn.net/YongHu1219/article/details/143565644

版权

前端专栏收录该内容

2 篇文章

订阅专栏

一、本地存储（适用于小型项目或特定场景）

1、使用浏览器的本地存储（Local Storage）

特点
- 数据持久存储：除非被手动清除或存储容量已满被浏览器清理，数据会一直存在。即使关闭浏览器窗口或重启计算机，存储的数据也不会丢失。
- 较大的存储容量：一般来说，浏览器为 localStorage 分配的存储容量相对较大，通常为几 MB 到几十 MB，具体取决于不同的浏览器。
- 可在同一域名下的不同页面和窗口之间共享数据：这对于在公司项目中需要在不同页面之间传递数据或保持一些全局状态非常有用。
适用场景
- 用户偏好设置的存储：例如，用户在公司内部的某个应用中设置了主题颜色、字体大小等偏好设置，可以使用 localStorage 将这些设置保存下来，以便用户下次访问时仍然生效。
- 离线数据缓存：如果公司的应用有一些数据在离线状态下也需要访问，可以使用 localStorage 将这些数据缓存起来。比如，一个销售管理应用可以将一些常用的客户信息缓存到 localStorage 中，以便在没有网络连接时也能查看。
- 跨页面数据传递：当需要在不同页面之间传递一些数据时，localStorage 是一个方便的选择。例如，在一个多步骤的表单填写过程中，可以将前几个步骤填写的数据存储在 localStorage 中，以便在后续步骤中使用。

2、使用浏览器的本地存储（Session Storage）

特点
- 数据与会话绑定：数据仅在当前浏览器会话期间有效，当关闭浏览器窗口或标签页时，数据将被清除。
- 存储容量相对较小：与 localStorage 相比，sessionStorage 的存储容量通常较小，但也足够满足一些临时数据的存储需求。
- 同样可在同一域名下的不同页面和窗口之间共享数据，但仅限于同一会话。
适用场景
- 临时数据存储：例如，在一个在线文档编辑应用中，当用户正在编辑文档时，可以使用 sessionStorage 存储一些临时的编辑状态信息，如当前选中的文本、光标位置等。一旦用户关闭了编辑页面，这些临时数据就可以被安全地清除。
- 防止表单重复提交：在一个表单提交的场景中，可以使用 sessionStorage 来标记表单是否已经提交过。当用户提交表单后，将一个标志位存储在 sessionStorage 中，在表单提交成功后的页面加载时，检查这个标志位，如果存在则表示表单已经提交过，避免用户重复提交表单。
- 多标签页协作：在一些需要多个标签页协作的应用中，sessionStorage 可以用来在同一会话的不同标签页之间传递临时信息。例如，在一个团队协作工具中，当一个用户在一个标签页中进行了某项操作，可以使用 sessionStorage 将这个操作通知传递给同一会话的其他标签页。

代码示例：

//localstorage
localStorage.setItem('recentImagePath', '/path/to/image.jpg');
const imagePath = localStorage.getItem('recentImagePath');

//sessionStorgage
sessionStorage.setItem('recentImagePath', '/path/to/image.jpg');
const imagePath = sessionStorage.getItem('recentImagePath');

2、使用 IndexedDB

一、特点

大容量存储
- IndexedDB 可以存储比 localStorage 和 sessionStorage 更多的数据，通常可以达到几百兆字节甚至更多，具体取决于浏览器和设备。这使得它非常适合存储大型数据集，如图片、视频、文档等。
支持事务处理
- IndexedDB 支持事务处理，这意味着可以确保数据的完整性和一致性。在一个事务中，可以执行多个操作，如添加、更新、删除数据等。如果其中一个操作失败，整个事务将被回滚，以保证数据的正确性。
异步操作
- IndexedDB 的操作都是异步的，这意味着不会阻塞浏览器的主线程。这对于处理大量数据或在后台执行数据存储和检索操作非常重要，可以避免影响用户体验。
支持对象存储和索引
- IndexedDB 允许存储复杂的对象，并可以为对象的属性创建索引。这使得可以快速地根据特定的属性值检索数据，提高数据查询的效率。

二、基本概念

数据库（Database）
- IndexedDB 中的数据库是一个独立的存储区域，可以包含多个对象存储（Object Store）。每个数据库都有一个唯一的名称。
对象存储（Object Store）
- 对象存储是用来存储数据的地方。可以将其类比为关系数据库中的表。每个对象存储都有一个名称和一组属性，用于定义存储的对象的结构。
索引（Index）
- 索引用于快速检索对象存储中的数据。可以为对象存储中的一个或多个属性创建索引，以便根据这些属性的值快速查找对象。
事务（Transaction）
- 事务是一组操作的集合，这些操作要么全部成功，要么全部失败。在 IndexedDB 中，所有的操作都必须在事务中进行，以确保数据的完整性。

三、使用步骤

打开数据库
- 使用 indexedDB.open() 方法打开一个数据库。这个方法接受两个参数：数据库的名称和版本号。如果数据库不存在，浏览器会自动创建一个新的数据库。

const request = indexedDB.open('myDatabase', 1);

处理数据库打开事件
- indexedDB.open() 方法返回一个请求对象，可以通过监听这个对象的 onsuccess 和 onerror 事件来处理数据库打开的结果。

request.onsuccess = function(event) {
  const db = event.target.result;
  console.log('数据库打开成功');
};

request.onerror = function(event) {
  console.error('数据库打开失败', event.target.error);
};

创建对象存储和索引（如果需要）
- 在数据库打开成功后，可以使用 db.createObjectStore() 方法创建对象存储，并使用 objectStore.createIndex() 方法为对象存储创建索引。

const objectStoreName = 'myObjectStore';
const objectStore = db.createObjectStore(objectStoreName, { keyPath: 'id' });
objectStore.createIndex('nameIndex', 'name', { unique: false });

执行事务
- 使用 db.transaction() 方法创建一个事务，并指定要访问的对象存储和事务的模式（只读、读写等）。然后，可以使用事务对象的 objectStore() 方法获取要操作的对象存储。

const transaction = db.transaction([objectStoreName], 'readwrite');
const store = transaction.objectStore(objectStoreName);

添加、更新和删除数据
- 使用对象存储的 add()、put() 和 delete() 方法来添加、更新和删除数据。这些方法都是异步的，需要通过监听事务的 onsuccess 和 onerror 事件来处理操作的结果。

const data = { id: 1, name: 'example', value: 100 };
const addRequest = store.add(data);
addRequest.onsuccess = function() {
  console.log('数据添加成功');
};

addRequest.onerror = function(event) {
  console.error('数据添加失败', event.target.error);
};

查询数据
- 使用对象存储的 get() 和 index 对象的 openCursor() 方法来查询数据。同样，这些方法也是异步的，需要通过监听事务的 onsuccess 和 onerror 事件来处理查询结果。

const getRequest = store.get(1);
getRequest.onsuccess = function(event) {
  const result = event.target.result;
  if (result) {
    console.log('查询结果', result);
  } else {
    console.log('未找到数据');
  }
};

const index = store.index('nameIndex');
const cursorRequest = index.openCursor();
cursorRequest.onsuccess = function(event) {
  const cursor = event.target.result;
  if (cursor) {
    console.log('游标遍历结果', cursor.value);
    cursor.continue();
  } else {
    console.log('游标遍历结束');
  }
};

适用场景：适用于需要在客户端本地存储大量图片、视频或文件数据的项目。例如，一个离线视频播放应用，可以将视频文件存储在 IndexedDB 中，以便在没有网络的情况下播放。

二、服务器存储（常见的大规模存储方式）

文件服务器
- 特点：专门用于存储文件的服务器，可以提供大容量的存储和高效的文件访问。可以通过 HTTP 或其他协议进行文件上传和下载。通常需要进行服务器配置和管理。
- 适用场景：适用于大多数企业级项目，尤其是需要存储大量图片、视频和文件的情况。例如，一个电商平台需要存储大量的商品图片和视频，就可以使用文件服务器进行存储。
- 前端代码示例（使用 axios 库进行文件上传）：

 const fileInput = document.getElementById('fileInput');
 const file = fileInput.files[0];
 const formData = new FormData();
 formData.append('file', file);
 axios.post('/upload', formData, {
   headers: {
     'Content-Type': 'multipart/form-data'
   }
 })
.then(response => {
   console.log('文件上传成功', response.data);
 })
.catch(error => {
   console.error('文件上传失败', error);
 });

云存储服务
- 特点：由第三方云服务提供商提供的存储服务，如阿里云 OSS、腾讯云 COS 等。具有高可用性、高扩展性和强大的安全性能。可以通过 API 进行文件上传和下载，使用方便。
- 适用场景：适用于各种规模的项目，尤其是需要快速部署和灵活扩展的情况。例如，一个创业公司的项目可以使用云存储服务来存储图片、视频和文件，无需自己搭建和维护文件服务器。
- 前端代码示例（以阿里云 OSS 为例）：

 const OSS = require('ali-oss');
 const client = new OSS({
   region: 'your-region',
   accessKeyId: 'your-access-key-id',
   accessKeySecret: 'your-access-key-secret',
   bucket: 'your-bucket-name'
 });
 const file = // 获取到的文件对象;
 client.put('your-object-key', file)
.then(result => {
   console.log('文件上传成功', result);
 })
.catch(error => {
   console.error('文件上传失败', error);
 });

三、CDN 加速（提高文件访问速度）

CDN（Content Delivery Network）即内容分发网络，它并非传统意义上的单纯存储方式，而是一种通过分布式服务器将内容更高效地分发给用户的网络架构。以下是关于 CDN 存储的详细介绍：

一、工作原理
1. 缓存机制
  - CDN 在全球各地部署了大量的边缘服务器。当用户请求内容（如图片、视频、文件等）时，CDN 会根据用户的地理位置和网络状况，将用户的请求导向离用户最近的边缘服务器。如果边缘服务器上已经缓存了用户请求的内容，就可以直接将内容返回给用户，大大减少了响应时间。
  - 例如，当一个位于北京的用户请求一张图片时，CDN 会判断离北京最近的边缘服务器是否有这张图片的缓存。如果有，就直接从该服务器返回图片，而无需从源服务器（即存储原始内容的服务器）获取。
2. 内容更新与同步
  - 当源服务器上的内容发生更新时，CDN 需要及时将更新后的内容分发到各个边缘服务器。这通常是通过一种推送或拉取的机制来实现的。
  - 推送机制：源服务器主动将更新后的内容推送给 CDN 的管理系统，管理系统再将内容分发到各个边缘服务器。这种方式可以确保内容的更新及时生效，但需要源服务器主动触发更新。
  - 拉取机制：边缘服务器定期向源服务器查询是否有新的内容，如果有，就从源服务器拉取更新后的内容。这种方式相对被动，但可以减少源服务器的负担。
二、优势
1. 提高访问速度
  - 由于用户可以从离自己最近的边缘服务器获取内容，减少了网络延迟和传输距离，从而大大提高了内容的访问速度。对于公司的图片、视频和文件等资源，如果通过 CDN 分发，用户在不同地区都能快速加载这些内容，提升用户体验。
  - 例如，一个在线视频平台使用 CDN 存储和分发视频，无论用户在国内还是国外，都能快速流畅地观看视频，减少卡顿现象。
2. 减轻源服务器压力
  - CDN 可以将大量的用户请求分流到边缘服务器，从而减轻源服务器的负载。源服务器只需要处理内容的更新和管理，而不需要直接应对大量的用户请求，提高了系统的稳定性和可靠性。
  - 对于公司的网站或应用，如果有大量的用户同时访问图片、视频等资源，源服务器可能会因为负载过高而出现性能问题。使用 CDN 可以有效地分散请求，降低源服务器的压力。
3. 提高可用性和可靠性
  - CDN 通常具有高可用性和容错机制。如果某个边缘服务器出现故障，CDN 可以自动将用户的请求导向其他正常的服务器，确保用户能够持续访问内容。
  - 例如，在自然灾害或网络故障等情况下，即使部分地区的网络出现问题，CDN 仍然可以通过其他地区的服务器为用户提供服务，保证业务的连续性。
三、使用场景
1. 静态内容分发
  - 对于公司网站上的静态图片、CSS、JavaScript 文件等，可以使用 CDN 进行存储和分发。这些静态资源通常不会频繁变化，非常适合缓存到 CDN 的边缘服务器上，提高用户访问速度。
  - 例如，一个电商网站的商品图片可以通过 CDN 存储，当用户浏览商品页面时，图片可以快速加载，提升用户购物体验。
2. 大文件下载
  - 对于公司提供的大文件下载，如软件安装包、视频文件等，使用 CDN 可以加快下载速度，减少用户等待时间。CDN 可以同时从多个边缘服务器为用户提供下载服务，提高下载带宽。
  - 例如，一个软件公司发布新的软件版本，可以将安装包上传到 CDN，用户在下载时可以从离自己最近的服务器获取，提高下载速度。
3. 流媒体服务
  - 在线视频、音频等流媒体服务对带宽和延迟要求较高，使用 CDN 可以确保流畅的播放体验。CDN 可以根据用户的网络状况动态调整视频的码率和分辨率，以适应不同的网络环境。
  - 例如，一个在线教育平台提供视频课程，使用 CDN 可以保证学生在不同地区都能流畅地观看视频，提高教学效果。
四、注意事项
1. 成本考虑
  - 使用 CDN 服务通常需要一定的费用，费用通常根据流量、存储容量和使用时长等因素计算。公司在选择 CDN 服务提供商时，需要根据自己的业务需求和预算进行综合考虑。
  - 同时，要注意避免不必要的流量浪费，例如对于一些不常访问的内容，可以考虑不使用 CDN 存储，以降低成本。
2. 安全问题
  - 虽然 CDN 可以提高内容的可用性和访问速度，但也带来了一些安全风险。例如，CDN 边缘服务器可能会受到攻击，导致用户获取到恶意内容。
  - 公司在使用 CDN 时，需要选择可靠的 CDN 服务提供商，确保其具有良好的安全防护措施。同时，对于敏感内容，可以考虑使用加密技术或其他安全手段来保护数据的安全。
3. 缓存策略设置
  - CDN 的缓存策略对性能和用户体验有很大影响。如果缓存时间设置过长，可能会导致用户获取到过期的内容；如果缓存时间设置过短，又会增加源服务器的负载和网络流量。
  - 公司需要根据内容的更新频率和用户需求，合理设置 CDN 的缓存策略。例如，对于经常变化的内容，可以设置较短的缓存时间；对于不常变化的内容，可以设置较长的缓存时间。