uniapp聊天记录本地存储(详细易懂)

1、通过websocket拿取数据

2、获取聊天数据

3、聊天信息存储、更新

4、读取聊天记录

5、发送信息，信息获取

6、最终效果

1.聊天信息的存储格式

2、样式效果

写聊天项目，使用到了本地存储。需要把聊天信息保存在本地，实时获取。

这个项目中，使用了websocket进行数据的交互，websocket部分就不写了，如果有需要可以看我关于websocket的博客

1、通过websocket拿取数据

下面我有用到websocket的一些方向，但是没有写方法内容，这用了方法名。宝子们，可以看我直接写的文章，结合理解。

在vue项目中webSocket封装（传token）_vue3 websocketbean 设置header token-CSDN博客

不需要传token的可以不传token，自己稍作更改，即可。

2、获取聊天数据

	import {sendWebsocket,websocketSend,initWebSocket} from "../../utils/apis/ws.js";onMounted(async () => {//进入页面建立链接initWebSocket()const val = ref({id: userstore.userData.id,username: userstore.userData.username})//通过websocket发送信息sendWebsocket(wsMessage, wsError);websocketSend(val.value)//命名文件，进行读取聊天信息(在聊天信息中找到,自己和对应id朋友的聊天记录)filename.value = `chat_${sendData.value.to}_${sendData.value.from}`;//接口数据，读取本地存储的数据chatLog.value = readChatRecords(sendData.value.from, sendData.value.to)[filename.value];})// 监听服务器传来的变化const wsMessage = (data) => {console.log(data, "监听服务器传来的变化");//得到websockt返回的数据wsstore.WsChat = data;if (data.from && data.to) {//如果发送人的id和接收人的id都存在,那么进入聊天记录存储方法,进行聊天存储和更新saveChatRecord(data.from, data.to, data)}//读取聊天信息,//const res = readChatRecords(data.from, userstore.userData.id)};

3、聊天信息存储、更新

对于一个名为A的用户和一个名为B的用户的聊天记录，可以将它们存储在一个名为chat_A_B.json的文件中。

    // 存储聊天记录function saveChatRecord(userId, toUserId, message) {// 找到本地存储最外面的对象 , userstore.userData.id 登录人的 id.const fileName = `chat_${userstore.userData.id}.json`;//创建里面的对象,自身id和接收信息的人id.用于区别和不同朋友的聊天记录const chat = `chat_${userId}_${toUserId}`;try {//获取本地的聊天信息，如果没有生成{"chatHistory": {}}const chatContent = uni.getStorageSync(fileName) || '{"chatHistory": {}}';//将获取的数据const chatRecords = JSON.parse(chatContent);//在获取数据中查找是否有自己和好友的聊天信息存储if (!chatRecords.chatHistory.hasOwnProperty(chat)) {//如果没有创建一个新的空数组chatRecords.chatHistory[chat] = [];}// 将新消息追加到聊天记录数组中chatRecords.chatHistory[chat].push(message);//本地存储uni.setStorageSync(fileName, JSON.stringify(chatRecords));} catch (e) {console.error(e);}}}

4、读取聊天记录

在用户打开聊天窗口时，我们应获取相应的聊天记录

	// 读取聊天记录function readChatRecords(userId, toUserId) {//找到登录人的存储文件const fileName = `chat_${userId}.json`;try {//获取信息,如果不存在,返回{"chatHistory": {}}const chatContent = uni.getStorageSync(fileName) || '{"chatHistory": {}}';return JSON.parse(chatContent).chatHistory;} catch (e) {console.error(e);return [];}}

5、发送信息，信息获取

//登录人发送信息,更新本地存储
const Send = async () => {//获取信息发送时间sendData.value.time = getNowTime()//想接口发送数据websocketSend(sendData.value)//将发送的聊天信息保存在本地saveChatRecord(sendData.value.to, sendData.value.from, sendData.value);//获取本地存储的数据进行页面更新chatLog.value = readChatRecords(sendData.value.from, sendData.value.to)[filename.value];console.log(chatLog.value, "发送完信息，获取数据");// 将输入框清空sendData.value.content = ""}//在登录人发送信息后本地存储数据更新,监测到更新后,读取存储数据,进行页面更新
watch(() => ws.WsChat, (newValue, oldValue) => {console.log(`count发生了变化，老值为${oldValue},新值为${newValue}`);//监测本地存储中是否有数据更新，即是否收到新的消息chatLog.value = readChatRecords(sendData.value.from, sendData.value.to)[filename.value];}, {immediate: true})