js原生使用CryptoJS

CryptoJS 是一个纯 JavaScript 实现的加密算法库，支持常见的加密算法，如 AES、DES、TripleDES、Rabbit、RC4、MD5、SHA-1、SHA-256 等。使用 CryptoJS 可以方便地进行数据加密和解密操作。

下面是使用 CryptoJS 进行 AES 加密和解密的示例代码：

// AES 加密
var key = CryptoJS.enc.Utf8.parse("1234567890123456"); // 密钥
var iv = CryptoJS.enc.Utf8.parse("1234567890123456"); // 偏移量
var encrypted = CryptoJS.AES.encrypt("Hello, world!", key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
console.log(encrypted.toString()); // 输出加密后的字符串

// AES 解密
var decrypted = CryptoJS.AES.decrypt(encrypted, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
console.log(decrypted.toString(CryptoJS.enc.Utf8)); // 输出解密后的字符串

相关问题

原生js使用websocket

原生 JavaScript 中使用 WebSocket 可以通过 WebSocket API 来实现。下面是使用原生 JavaScript 创建和使用 WebSocket 的基本步骤：

1. 创建 WebSocket 对象：使用 `new WebSocket(url)` 创建一个 WebSocket 对象，其中 `url` 是 WebSocket 服务器的地址。

var socket = new WebSocket("ws://example.com/socket");

2. 监听事件：WebSocket 对象有几个事件可以监听，包括连接建立、消息接收、连接关闭等。

- `onopen`：当连接成功建立时触发。
- `onmessage`：当接收到服务器发送的消息时触发。
- `onclose`：当连接关闭时触发。
- `onerror`：当发生错误时触发。

socket.onopen = function() {
  console.log("连接已建立");
};

socket.onmessage = function(event) {
  var message = event.data;
  console.log("接收到消息：" + message);
};

socket.onclose = function() {
  console.log("连接已关闭");
};

socket.onerror = function(error) {
  console.log("发生错误：" + error);
};

3. 发送消息：使用 `send(data)` 方法向服务器发送消息。

socket.send("Hello, server!");

4. 关闭连接：使用 `close()` 方法关闭 WebSocket 连接。

socket.close();

这是原生 JavaScript 使用 WebSocket 的基本流程。你可以根据具体需求进行扩展和处理不同的事件。如果需要更高级的功能，也可以考虑使用第三方库，如 Socket.io。

原生js使用pinia

Pinia是Vue 3官方推荐的状态管理模式，它是一个轻量级的状态管理库，用于组织和管理应用中的共享状态。在JavaScript中，原生使用Pinia主要涉及以下几个步骤：

1. **安装**：
首先确保已经安装了Vue 3及其生态系统，然后通过npm或yarn安装`@vue/pinia`：

   npm install @vue/pinia
   # 或者
   yarn add @vue/pinia

2. **创建store**：
创建一个名为store.js的文件，使用`createStore`函数创建一个新的Pinia实例：

   import { createStore } from '@vue/pinia';

   const store = createStore({
     id: 'myStore',
     state: () => ({
       count: 0,
     }),
     actions: {
       increment() {
         this.count++;
       },
     },
     getters: {
       getCount() {
         return this.count;
       },
     },
   });

3. **注入store到组件**：
在Vue组件中，需要通过Vue的Composition API中的`provide`和`inject`来注入store。在父组件提供：

   export default {
     setup() {
       provide('myStore', store);
       return {};
     },
   };

在子组件中注入并使用：

   <script>
   import { inject } from 'vue';
   export default {
     setup() {
       const myStore = inject('myStore');
       console.log(myStore.getCount()); // 获取状态
       myStore.increment(); // 执行动作
       return {};
     },
   };
   </script>

4. **守卫生命周期**：
如果需要在组件切换时更新状态，可以使用`useAppInit`或`useAppTick`钩子。

5. **销毁store**：
在全局组件卸载前，建议手动调用`store.$unmount()`以释放内存。