Web存储和WebSocket

最新推荐文章于 2024-03-16 15:44:16 发布

weixin_45274554

最新推荐文章于 2024-03-16 15:44:16 发布

阅读量926

点赞数

CC 4.0 BY-SA版权

文章标签： websocket html5 javascript

本文链接：https://blog.csdn.net/weixin_45274554/article/details/120309556

本文详细介绍了Web存储的三种方式：Cookie、SessionStorage和LocalStorage，包括它们的用途、存储限制及操作方法。同时，讲解了WebSocket协议，它是如何实现实时、双向通信的，以及在服务器与客户端之间建立持久连接的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Web存储

1. cookie

1.一般情况下，cookie是产生于服务器端，保存于客户端

2.cookie存储在浏览器中，每次浏览器向服务器发送请求都需要携带cookie

3.每次都会携带在HTTP请求头里面，如果使用Cookie保存过多数据会带来性能问题

4.只针对于服务器，同一个服务器可以共享cookie

5.存储少量数据，一般限制在4KB左右

通常通过js-cookie这个库来操作cookie

// 在头部标签引入js-cookie
<script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/latest/js.cookie.js"></script>

<script>
    // console.log(Cookies);
    // 创建一个cookies,7天后过期
    // 三个参数(key,value,attributes)
    Cookies.set('name','terry',{expires:7});
    // 获取cookies
    console.log(Cookies.get('name'));
    // 清除cookies
    Cookies.remove('name');
</script>

2. sessionStorage

1.sessionStorage 会话存储

2.页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话

3.打开多个相同的URL的Tabs页面，会创建各自的sessionStorage

4.关闭对应浏览器tab，会清除对应的sessionStorage

5.仅在客户端保存（浏览器），不参与和服务器的通信，一般5MB

<script>
    // 设置内容
    sessionStorage.setItem('name','larry');
    // 获取内容
    console.log(sessionStorage.getItem('name'));
    // 清空内容
    sessionStorage.clear('name');// 只清除属性值
    sessionStorage.removeItem('name');// 清除属性名和属性值
</script>

3. localStorage

1.localStorage 本地存储

2.存到本地磁盘中，即使浏览器关闭数据依然在，除非被清除，否则永远保留

3.仅在客户端保存（浏览器），不参与和服务器的通信，一般5MB

<script>
    // 设置内容
    localStorage.setItem('name','letme');
	// 获取内容
    console.log(localStorage.getItem('name'));
    // 清空内容
    localStorage.clear('name');// 只清除属性值
    localStorage.removeItem('name');// 清除属性名和属性值
</script>

webSocket

1.WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议

2.WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据

3.使用websocket可以在服务器与客户端之间建立一个非HTTP的双向连接，这个连接是实时的也是永久的，除非被显示关闭

4.服务器可以随时将消息推送到客户端

<script>
    // 创建一个webSocket的实例 
    // 括号里为服务器连接地址 {1}为用户id 消息推送的时候需要指定userId来确定把消息传递给谁
    var socket=new WebSocket('ws://47.93.206.13:7788/imserver/{1}');
    // 获取服务器端推送的数据
    socket.onmessage=function(event){
        console.log(event.data);
    }
    // 监听websocket和服务器端连接成功
    socket.onopen=function(){
        console.log('websocket和服务器端连接成功');
    }
    // 监听websocket和服务器端连接关闭
    socket.close=function(){
        console.log('websocket和服务器端连接关闭');
    }
    // 手动监听websocket和服务器端连接关闭
    setTimeout(socket.close,3000);
</script>