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

  • 时间:2018-11-06 23:15 作者:前端全栈开发学习 来源:前端全栈开发学习 阅读:96
  • 扫一扫,手机访问
摘要:最终效果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.jianshu.com/p/f60758991e2d

小结:

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

参考资料

  • MDN LocalStorage
  • 阮一峰 Web Storage:浏览器端数据储存机制
  • 全部评论(0)
最新发布的资讯信息
【网页前端|】从BAT大数据工程师那里总结的大数据学习方法(2019-05-23 11:46)
【系统环境|Linux】值得了解的十大数据发展趋势(2019-05-22 11:33)
【系统环境|软件环境】如何成为一名大数据工程师?(2019-05-20 12:11)
【系统环境|Linux】大数据四大常识,不会你敢说自己在做大数据?(2019-05-19 11:39)
【系统环境|】需要同时掌握AVA和Linux,才可以继续大数据课程的学习(2019-05-18 10:28)
【系统环境|软件环境】学习大数据,一定要了解大数据的这些用途(2019-05-16 10:49)
【系统环境|Linux】bt宝塔控制面板mysql频繁自动停止详细解决办法(2019-05-16 08:52)
【系统环境|】大数据零基础学习路线,新人记得保存收藏哦(2019-05-15 10:54)
【系统环境|】全网最全最新的大数据系统学习路径(2019-05-14 15:38)
【系统环境|Linux】毕业设计:音乐分享系统(2019-05-14 07:48)
手机二维码手机访问领取大礼包
返回顶部