活学活用!用 Local Storage 实现多人聊天室

  • 时间:2018-11-06 23:15 作者:前端全栈开发学习 来源:前端全栈开发学习 阅读:1225
  • 扫一扫,手机访问
摘要:最终效果Storage用于在浏览器中保存数据, storage分两种第一种是Local Storage, 用于长时间保存数据(较为常用)第二种是 Session Storage, 关掉浏览器, 保存的数据就会清空(具体使用用法和Local Storage类似, 可以套用Local Storage的方
活学活用!用 Local Storage 实现多人聊天室

最终效果

Storage用于在浏览器中保存数据, storage分两种

  • 第一种是Local Storage, 用于长时间保存数据(较为常用)
  • 第二种是 Session Storage, 关掉浏览器, 保存的数据就会清空(具体使用用法和Local Storage类似, 可以套用Local Storage的方法)
活学活用!用 Local Storage 实现多人聊天室

篇幅有限,这里以Local Storage为例

Local Storage可以用来做什么?

可以用来存储客户搜索历史

活学活用!用 Local Storage 实现多人聊天室

可以用来存储播放器设置

活学活用!用 Local Storage 实现多人聊天室

可以用来存储客户信息

活学活用!用 Local Storage 实现多人聊天室

活学活用!用 Local Storage 实现多人聊天室

Local Storage怎样用?

通过js获取localstorage对象

活学活用!用 Local Storage 实现多人聊天室

// 从window对象中获取localStorage
window.localStorage

查看LocalStorage的数量

活学活用!用 Local Storage 实现多人聊天室

window.localStorage.length

setItem 添加数据, 修改数据

  • 添加数据
window.localStorage.setItem("userName", "昭昭")
活学活用!用 Local Storage 实现多人聊天室

活学活用!用 Local Storage 实现多人聊天室

  • 修改数据
window.localStorage.setItem("userName", "zhaoolee")
活学活用!用 Local Storage 实现多人聊天室

活学活用!用 Local Storage 实现多人聊天室

getItem 读取数据

window.localStorage.getItem("userName")
活学活用!用 Local Storage 实现多人聊天室

removeItem 移除特定键的值

window.localStorage.removeItem("userName")
活学活用!用 Local Storage 实现多人聊天室

活学活用!用 Local Storage 实现多人聊天室

clear 清理所有键的值

window.localStorage.clear()
活学活用!用 Local Storage 实现多人聊天室

根据索引获取"键的名字" , window.localStorage.key()

var storageLength = window.localStorage.length;
for(var i = 0; i < storageLength; i++) {
console.log(window.localStorage.key(i));
}
活学活用!用 Local Storage 实现多人聊天室

对Local Storage增加事件监听

function onLocalStorageChange(event) {
console.log(event.key);
}
window.addEventListener('storage', onLocalStorageChange);
  • 任何LocalStorage的 增删改查 事件,都会触发函数 onLocalStorageChange
  • 还有一个很有意思的性质, 在某域名下( http://zhaoolee.com ), 有A页面( http://zhaoolee.com/A.html )和B页面( http://zhaoolee.com/B.html ), 在A页面下进行LocalStorage的 增删改查, 只有在其它页面(比方B页面)才能触发 onLocalStorageChange
  • 我们可以用上面提到的性质, 把LocalStorage当数据库,写一个本地的聊天室(纯属自娱自乐)

Local Storage聊天室

活学活用!用 Local Storage 实现多人聊天室

  • 源码

实现的功能

  • 可以匿名聊
  • 可以无限加人
  • 也可以随时换名字







开始聊天




class="form-control" placeholder='请输入你的名字( 默认为“匿名客户” )' id="user-name" onblur="ChangeUserName(this)">














运行上面的聊天源码, 需要开启http服务, 可以参考 https://www.songma.com/p/f60758991e2d

小结:

博主前几天写网站,服务端向浏览器下发cookies, 因为网络环境不太好, cookies下发可能会失败, 博主最后用Local Storage代替了cookies, 还是蛮好用的, 哈哈, 还是要主动拥抱新技术!

参考资料

  • MDN LocalStorage
  • 阮一峰 Web Storage:浏览器端数据储存机制
  • 全部评论(0)
最新发布的资讯信息
【系统环境|】2FA验证器 验证码如何登录(2024-04-01 20:18)
【系统环境|】怎么做才能建设好外贸网站?(2023-12-20 10:05)
【系统环境|数据库】 潮玩宇宙游戏道具收集方法(2023-12-12 16:13)
【系统环境|】遥遥领先!青否数字人直播系统5.0发布,支持真人接管实时驱动!(2023-10-12 17:31)
【系统环境|服务器应用】克隆自己的数字人形象需要几步?(2023-09-20 17:13)
【系统环境|】Tiktok登录教程(2023-02-13 14:17)
【系统环境|】ZORRO佐罗软件安装教程及一键新机使用方法详细简介(2023-02-10 21:56)
【系统环境|】阿里云 centos 云盘扩容命令(2023-01-10 16:35)
【系统环境|】补单系统搭建补单源码搭建(2022-05-18 11:35)
【系统环境|服务器应用】高端显卡再度登上热搜,竟然是因为“断崖式”的降价(2022-04-12 19:47)
手机二维码手机访问领取大礼包
返回顶部