# store-library

**Repository Path**: d7c/store-library

## Basic Information

- **Project Name**: store-library
- **Description**: store-library 是一个关于前端存储的 library。
- **Primary Language**: NodeJS
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: http://www.d7c.top/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-08-27
- **Last Updated**: 2023-01-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# store-library

## 介绍

store-library 是一个关于前端存储的 library。

## 软件架构

该 library 会将 store 对象绑定到 window 对象上，所以全局只能被挂载一次。存储的数据会在用户清空浏览器时删除，并且都遵循同源策略。当数据量不大时使用 localStorage，当数据量较大时使用 IndexedDB。

### localStorage

localStorage 是 HTML5 中加入的新特性，主要用来做浏览器端键值存储，减少网络请求，理论上不主动清空数据会永久存在，即使保存的数据量超出浏览器规定的大小，也不会把旧数据清空，而只会报错。但需要注意的是，在移动设备上的浏览器或各 Native App 用到的 WebView 里，localStorage 都是不可靠的，可能会因为各种原因（比如说退出 App、网络切换、内存不足等原因）被清空。参考文档：[localStorage_API](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage)。

<img src="./docs/localStorage 浏览器兼容情况.png">

### IndexedDB

IndexedDB 是一个用于在浏览器中存储较大数据结构的 Web API，并提供索引功能以实现高性能查询。像其他基于 SQL 的关系型数据库管理系统（RDBMS）一样，IndexedDB 是一个事务型的使用 JavaScript 来存储键值（对象）数据的数据库系统。参考文档：[IndexedDB_API](https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API)。

IndexedDB 遵循同源策略，每个源都会关联到不同的数据库集合，不同源是不允许访问其他源的数据库，从而保证了数据的安全性。

IndexedDB 自带事务，所有数据库操作都会绑定到特定的事务上，并且这些事务是自动提交的，IndexedDB 不支持手动提交事务。

IndexedDB API 大部分都是异步的，在使用异步方法时 API 不会立即返回结果，而是返回一个 callback 函数。异步 API 的本质是向数据库发送一个操作请求，当操作完成的时候会收到一个 DOM event，通过该 event 可以知道操作是否成功并获取操作结果。

同类实现：[localForage](https://localforage.github.io/localForage/)、[Dexie.js](https://www.dexie.org/)、[ZangoDB](https://github.com/erikolson186/zangodb)、[JsStore](https://jsstore.net/)、[PouchDB](https://pouchdb.com/)、[idb](https://www.npmjs.com/package/idb)、[idb-keyval](https://www.npmjs.com/package/idb-keyval)、[sifrr-storage](https://www.npmjs.com/package/@sifrr/storage)、[lovefield](https://github.com/google/lovefield)。

<img src="./docs/IndexedDB 浏览器兼容情况.png">

## 安装教程

### 1. 安装项目依赖模块

```

```

### 2. 运行测试

```
cd store-library
npm run dev
```

## 使用说明

### 1. 克隆并安装项目，在项目根目录下执行

```
npm install
```

### 2. 其他命令

```
Compiles and hot-reloads for debugger：npm run debug
Compiles and hot-reloads for development：npm run serve / npm run start / npm run dev
Compiles and minifies for production：npm run build
本地安装该包：npm install ../store-library
从 Gitee 上安装该包：npm install git+https://gitee.com/d7c/store-library.git#master
```

### 3. 使用方式

```
// CommonJS module require
import store from "./index";
store.use({ "dateType": "localStorage" });

// AMD module require
require(["./index"], function(store) {
    store.use({ "dateType": "localStorage" });
});

// script
<script src="../dist/index.js"></script>
store.use({ "dateType": "localStorage" });
```

## 捐助打赏

如果您觉得我们的开源软件对你有所帮助，请扫下方二维码打赏我们一杯咖啡。
![微信收款码](https://images.gitee.com/uploads/images/2021/0222/174352_b22739f5_1070311.jpeg "微信收款码.jpg")
![微信赞赏码](https://images.gitee.com/uploads/images/2021/0222/174521_67e18b39_1070311.jpeg "微信赞赏码.jpg")
![支付宝收款码](https://images.gitee.com/uploads/images/2021/0222/174540_94a9ac41_1070311.jpeg "支付宝收款码.jpg")

## 参与贡献

1.  Fork 本仓库
2.  新建 store-library_xxx 分支
3.  提交代码
4.  新建 Pull Request

## 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)

<style>p{text-indent:2em}</style>