初始设定

发表于 本文字数： 2k 阅读时长 ≈ 2 分钟

# 加密

# AES

  • 对称加密，加密和解密使用同一个密钥

# AES 应用场景

数据传输

# AES 代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import CryptoJS from 'crypto-js'

const key = CryptoJS.enc.Utf8.parse('1234567890123456') // 密钥
const iv = CryptoJS.enc.Utf8.parse('1234567890123456') // 偏移量

// 加密
const encryptedData = CryptoJS.AES.encrypt('hello world', key, {
  iv,
  mode: CryptoJS.mode.CBC,
  padding: CryptoJS.pad.Pkcs7
}).toString()

// 解密
const decryptedData = CryptoJS.AES.decrypt(encryptedData, key, {
  iv,
  mode: CryptoJS.mode.CBC,
  padding: CryptoJS.pad.Pkcs7
}).toString(CryptoJS.enc.Utf8)

# RSA

  • 非对称加密，加密和解密使用不同的密钥

# 原理解析

https://zhuanlan.zhihu.com/p/450180396
https://blog.csdn.net/dbs1215/article/details/48953589

# RSA 应用场景

数据传输

# RSA 代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const crypto = require('crypto')

// 生成密钥对
const { publicKey, privateKey } = crypto.generateKeyPairSync('rsa', {
  modulusLength: 2048,
  publicKeyEncoding: {
    type: 'pkcs1',
    format: 'pem'
  },
  privateKeyEncoding: {
    type: 'pkcs1',
    format: 'pem'
  }
})


// 加密
const encryptedData = crypto.publicEncrypt(publicKey, Buffer.from('hello world'))

// 解密
const decryptedData = crypto.privateDecrypt(privateKey, encryptedData)

# MD5、SHA-1\SHA-256

  • 哈希算法，不可逆

# MD5 应用场景

1. 文件完整性检查
2. 密码哈希存储
3. 数字签名

# MD5 代码示例

1
2
3
4
const crypto = require('crypto')
const md5 = crypto.createHash('md5')
md5.update('hello world')
const hash = md5.digest('hex')
1
2
const md5 = require('md5')
const hash = md5('hello world')
  • SHA-256
1
2
3
4
const crypto = require('crypto')
const sha256 = crypto.createHash('sha256')
sha256.update('hello world')
const hash = sha256.digest('hex')

# SHA

  • 哈希算法，不可逆

# SHA 应用场景

密码明文转密文存储

# SHA 代码示例

# Base64

  • 编码算法，可逆，常用于图片、音频等二进制数据的编码

# Base64 应用场景

# Base64 代码示例

  • 图片转 base64
1
2
const fs = require('fs')
const base64 = fs.readFileSync('image.png', 'base64')
  • base64 转图片
1
2
3
const fs = require('fs')
const base64 = 'data:image/png;base64,iVBORw0KGg...'
fs.writeFileSync('image.png', base64, 'base64')

发表于 分类于 本文字数： 1.9k 阅读时长 ≈ 2 分钟

# 基本概念

localStorage 和 sessionStorage 都是 Web Storage API 的一部分，用于在客户端存储数据。它们都是键值对存储，可以存储字符串数据，也可以存储对象数据。

# 区别

localStorage 和 sessionStorage 的主要区别在于数据的生命周期。localStorage 的数据会一直存在，直到手动删除，而 sessionStorage 的数据在页面会话结束时会被清除。

# 作用域不同

  • sessionStorage 的作用域限定在当前会话（当前浏览器标签页或窗口）。
  • localStorage 的作用域是永久的，数据在不同会话（遵循同源策略）之间共享。

# 生命周期不同

  • sessionStorage 的数据在会话结束时被清除，即当用户关闭浏览器标签页或窗口时，sessionStorage 中的数据会被删除。
  • localStorage 的数据是持久化的，除非被显式清除，否则会一直保存在客户端。

# 存储大小不同

  • sessionStorage 的存储容量通常比 localStorage 小。一般来说，sessionStorage 的容量限制在 5MB 左右。
  • localStorage 的容量限制通常在 5MB 到 10MB 之间，不同浏览器可能会有所不同。

# 数据共享不同

  • sessionStorage 的数据在同一个浏览器标签页或窗口中共享，但不会跨标签页或窗口共享。
  • localStorage 的数据在同一个域名下的所有标签页和窗口中共享。

# 使用场景

  • sessionStorage 适用于存储需要在同一会话中共享的数据，例如用户的登录状态、表单数据等。当用户关闭浏览器标签页或窗口时，这些数据会被自动清除。
  • localStorage 适用于存储需要在多个会话中共享的数据，例如用户的偏好设置、购物车数据等。这些数据会一直保存在客户端，直到被显式清除。

# 使用方法

# localStorage

1
2
3
4
5
6
7
8
9
10
11
// 存储数据
localStorage.setItem('key', 'value');

// 获取数据
var value = localStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');

// 清空所有数据
localStorage.clear();

# sessionStorage

1
2
3
4
5
6
7
8
9
10
11
// 存储数据
sessionStorage.setItem('key', 'value');

// 获取数据
var value = sessionStorage.getItem('key');

// 删除数据
sessionStorage.removeItem('key');

// 清空所有数据
sessionStorage.clear();

# 注意事项

  • localStorage 和 sessionStorage 的数据存储遵循同源策略，即只有在相同域名、相同协议和相同端口下的页面才能访问这些数据。

  • localStorage 和 sessionStorage 的数据存储是同步的，即调用 setItem 、 getItem 、 removeItem 和 clear 方法会立即生效，不会阻塞页面的渲染。因此，在调用这些方法时，需要注意不要在关键路径上使用它们，以免影响页面的性能。

  • localStorage 和 sessionStorage 的数据存储是字符串类型的，如果需要存储非字符串类型的数据，可以使用 JSON.stringify 和 JSON.parse 方法进行序列化和反序列化。

  • localStorage 和 sessionStorage 的数据存储是持久化的，即数据不会在页面关闭后自动清除。如果需要清除数据，可以使用 removeItem 或 clear 方法。

  • localStorage 和 sessionStorage 的数据存储大小有限制，一般为 5MB 左右，不同浏览器可能会有所不同。如果需要存储大量数据，可以考虑使用其他存储方式，如 IndexedDB。

  • localStorage 和 sessionStorage 的数据存储是安全的，即数据不会被第三方脚本访问。但是，如果页面中存在 XSS 攻击，攻击者可以通过注入恶意脚本访问这些数据。因此，在使用 localStorage 和 sessionStorage 时，需要注意不要存储敏感数据，以免造成安全风险。

  • localStorage 和 sessionStorage 的数据存储是可被浏览器清除的，如用户手动清除浏览器缓存、浏览器崩溃等。因此，在使用 localStorage 和 sessionStorage 时，需要注意数据的持久化和安全性。

发表于 本文字数： 1.1k 阅读时长 ≈ 1 分钟

hexo入门介绍：如何搭建hexo博客并部署到github

阅读全文 »
0%