编程

sessionStorage详解

admin 编程 暂无评论 506 浏览

sessionStorage可以使用setItem设置、getItem获取、removeItem删除、clear清空。具体详见MDN

MDN解释

sessionStorage 属性允许你访问一个 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。**在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话，**这点和 session cookies 的运行方式不同。

可以看到sessionStorage在页面会话结束时会被清除，也就是讲一个页面上的sessionStorage在页面刷新或者恢复页面的时候都不会丢失或者被清空。

那一个域名下的sessionStorage 的数据会在同一网站的多个标签页之间共享吗？要解决这个问题，使用chrome测试了一下场景。

当在一个a页面有sessionStorage时，这时新增一个标签并输入与a页面相同的url。新的标签里面打开的页面是没有另一个标签页面里面的sessionStorage时。也就是讲，新标签是新的会话。

_blank: 在a页面点击链接或者使用window.open打开与a页面相同url的标签页面时，新标签页面sessionStorage继承自之前页面的sessionStorage，但是后续两个页面的sessionStorage是单独控制的。两个页面之间并无关联

结论

  1. 不同tab之间就算相同url，sessionStorage也是不会共享的。sessionStorage只存在于当前会话中。
  2. 使用window.open或者点击链接跳转的页面，新页面的sessionStorage会拷贝老页面的。但两者之间并无关联，还是两个会话。

参考

https://html.spec.whatwg.org/multipage/browsers.html#top-level-browsing-context

https://liyaoli.com/2015-03-12/HTML-iframe.html

https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

https://github.com/lmk123/blog/issues/66

https://segmentfault.com/a/1190000016910121

…

        
Read more

Stack Overflow 2022 开发者调查：Rust/PostgreSQL 最受喜爱，PHP 薪水偏低

admin 编程 暂无评论 382 浏览

Stack Overflow 2022 开发者调查报告现已出炉。Stack Overflow 年度开发者调查是面向全球开发者进行的规模最大、最全面的调查，调查涵盖了从开发者喜爱的技术到工作偏好等内容。2022 年是 Stack Overflow 发布年度开发者调查报告的第十二年，有来自 180 个国家 / 地区的 73000 多名开发人员参与了这个调查。其中，依旧是来自美国和印度的受访者数量最多，其次是德国和 UKI（英国和爱尔兰）；仅有 632 份调查反馈来自中国开发者，占比为 0.88%。

此次调查的一些亮点内容如下：

  • 在线学习编程的比例从 60% 上升到了 70%，45 岁以上的受访者喜欢从书本上学习知识，年轻人（18 岁以下）依赖在线学习与资源。
  • Docker 似乎正在成为专业开发人员的基本工具，从 55% 增加到 69%。
  • Rust 已连续第七年成为最受喜爱的语言，87% 的开发人员表示他们希望继续使用它。
  • Phoenix 取代 Svelte
…
Read more

原解决socket.io不能使用websocket长连接,一直轮询请求的问题

admin 编程 暂无评论 1,933 浏览

参考:https://socket.io/docs/v4/troubleshooting-connection-issues/#a-proxy-in-front-of-your-servers-does-not-accept-the-WebSocket-connection

可能的解释：

服务器前面的代理不接受 WebSocket连接

请在此处查看文档。

 

在Nginx代理上,修改nginx配置

如下.

http {
  server {
    listen 80;
    server_name example.com;

    location / {
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $host;

      proxy_pass http://localhost:3000;

      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
…
    
Read more

原node 调用php接口,node.js 怎么访问一个php接口?

admin 编程 暂无评论 471 浏览

可以的，以GET请求为例

var http = require('http'); //调用 https接口,请用require('https');

var qs = require('querystring');

var data = {

a: 123,

time: new Date().getTime()};//这是需要提交的数据

var content = qs.stringify(data);

var options = {

hostname: '127.0.0.1',

port: 10086,

path: '/pay/pay_callback?' + content,

method: 'GET'

};

var …

    
Read more

在网页上通过语音输入文字 – HTML5 Web Speech API 语音识别介绍

admin 编程 暂无评论 2,947 浏览

         很久前我曾经提到过Web Speech API，现在Chrome刚刚发布的25版本已经为桌面和Android提供了对此API的支持，这对Web开发者来说无疑是一个具有里程碑意义的事件，因为我们可以直接在Web App中原生使用语音识别技术，Web应用的新时代将会由此开启。

         控制不住激动的心情，下面我会通过示例马上给大家介绍此API的详细信息。

         Google专门提供了一个原生示例，来演示Web Speech API。


         我们来看看实现代码。首先需要判断浏览器是否支持Web Speech API，我们通过window下是否存在

…
Read more

网络摄像头RTSP视频流WEB端实时播放实现方案

admin 编程 暂无评论 2,549 浏览
IPC视频流怎么实时在WEB浏览器播放，视频流格式是RTSP。
下面我整理了自己实现的方案以及网上看到的一些方案

一、FFmpeg + nginx 将转 hls 通过 video.js 在支持h5浏览器播放（我实现的）

参见：Nginx+FFmpeg实现rtsp流转hls流，在WEB通过H5 video实现视频播放

不足：hls延迟较rtmp、http-flv大

二、FFmpeg + nginx-rtmp-module + h5 video，rtsp转rtmp播放

https://blog.csdn.net/gui66497/article/details/78590190
https://blog.csdn.net/LLittleF/article/details/81111713

注：通过video.js播放rtmp流。需要将代码放到服务器，本地windows电脑无法播放

不足：需要浏览器开启flash

三、FFmpeg + nginx-http-flv-module + flv.js，rtsp转rtmp，直接播放flv格式

基于nginx-rtmp-module，通过配置将rtmp转为flv，最后通过flv.js播放。
https://github.com/winshining/nginx-http-flv-module/blob/master/README.CN.md
https://segmentfault.com/a/1190000016043297
https://blog.csdn.net/qq_22633333/article/details/96288603#comments

这种方式是最理想的，我目前找到的方案。当然单指不想花钱买收费方案的。

四、WebRTC

https://github.com/lulop-k/kurento-rtsp2webrtc
https://www.jianshu.com/p/1ddfa72de165

…
            
Read more

原socket.io使用示例–向指定客户端发消息

admin 编程 暂无评论 1,784 浏览

安装 node

创建一个目录例如socketio

在目录下执行

npm install socket.io
npm install redis

 

client:  代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>socket.io</title>
<meta name="keywords" content="">
<meta name="description" content="">
</head>

<body>

    <script src="node_modules/socket.io/client-dist/socket.io.js"></script>
    <script>

const socket = io("ws://localhost:3000");

socket.on("connect", () => {
…
        
Read more

算法分析—大O、大Ω、大θ

admin 编程 暂无评论 398 浏览

前言

在算法的学习中，最开始便是要学习算法的分析。学习算法分析时，我们便会接触到这么几个符号：大O、大Ω、大θ，常常让人难以理解。

在通常的算法分析时，我们可以明白，在输入规模较小，各种算法之间的时间消耗并无明显差别。只有当输入规模较大时，对各个算法之间消耗差别的对比与分析才有意义。所以上面几个符号便常用于表达当规模逐渐趋向于一个极大数时的算法复杂度。

在表示一个算法时间复杂度时，我们常用如 T(n)=O(n^2) 的形式表示，而在渐进分析中的 “=” 更倾向于 “∈” 的意思。打个比方：渐进表达式 f(n) = O(g(n)) 所表达的意思是 O(g(n)) = [ f(n),h(n),…,g(n) ], f(n) ∈ O(g(n)) 。

一、大O表示法

f(x) = O(g(x)) 表示的含义是f(x)以g(x)为上界

大O是我们在分析算法复杂度时最常用的一种表示法。当函数的大小只有上界，没有明确下界的时候，则可以使用大O表示法，该渐进描述符一般用与描述算法的 最坏复杂度。f(x) = O(g(x))正式的数学定义：存在正常数c、n、n0，当 n>n0 的时，任意的

…
Read more