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

  • 时间:2018-11-06 23:15 作者:前端全栈开发学习 来源:前端全栈开发学习 阅读:128
  • 扫一扫,手机访问
摘要:最终效果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)
最新发布的资讯信息
【系统环境|】什么是HTML5前端开发?HTML5前端要学哪些技术?(2019-07-21 11:47)
【系统环境|】2019年web前端开发技术框架有哪些(2019-07-20 12:06)
【系统环境|】什么是Web?零基础能不能学Web前端开发?(2019-07-19 07:04)
【网页前端|HTML】为什么学Web前端?选择Web前端理由(2019-07-17 20:28)
【网页前端|JS】Java面经-百度新入职老哥整理近半年学习经验,面试刷题路线!(2019-07-16 22:16)
【网页前端|HTML】最全面的前端开发指南(2019-07-15 12:57)
【系统环境|数据库】零基础如何快速学好大数据?(2019-06-29 12:27)
【系统环境|Linux】零基础如何学好大数据?必备需要学习知识(2019-06-18 11:54)
【系统环境|】Hadoop环境中管理大数据存储八大技巧(2019-06-15 11:01)
【系统环境|服务器应用】现在国内IT行业是不是程序员过多了?(2019-06-11 06:34)
手机二维码手机访问领取大礼包
返回顶部