Day: 2022年7月2日

JS的Session操作

admin web前端 暂无评论 1,535 浏览

在PHP服务器端，有Session和Cookie的概念，在JS端，也有相对应的Session和Cookie的概念。 JS的Cookie,可以利用cookie.js来完成相应的操作。
具体可以看 Cookie.js实现保存用户名和密码操作(四) 一章。 session时使用sessionStorage . Storage表示存储的意思。

一. 设置值

sessionStorage.setItem(key,value);

设置元素的值, setItem. 类似于服务器端的setAttribute();

二.得到值

var data=sessionStorage.getItem(key);

类似于服务器端的getAttribute();方法

三. 删除值

sessionStorage.removeItem(key);

类似于服务器端的removeAttribute() 方法.

四.清除Session中所有的值

sessionStorage.clear();

类似于服务器端的 session.invalidate();

五.用途

有的时候，将值放置在JS中，当刷新页面的时候，会重新刷新一下JS，那么设置的值就又回到了原始的值。 如果不想这样，可以将这个值放置在JS的session中。 用sessionStorage来进行相应的设置。

谢谢!!!

…

        
Read more

sessionStorage详解

admin 编程 暂无评论 515 浏览

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

js 实现sleep函数的几种方式

admin web前端 暂无评论 11,420 浏览
sleep函数作用是让线程休眠，等到指定时间在重新唤起。
方法一：这种实现方式是利用一个伪死循环阻塞主线程。因为JS是单线程的。所以通过这种方式可以实现真正意义上的sleep()。 
function sleep(delay) {
  var start = (new Date()).getTime();
  while ((new Date()).getTime() - start < delay) {
    continue;
  }
}

function test() {
  console.log('111');
  sleep(2000);
  console.log('222');
}

test()

 

方法二：定时器

function sleep1(ms, callback) {
                setTimeout(callback, ms)
            }
            //sleep 1s
…
Read more

Chrome调试WebSocket

admin 工具 暂无评论 904 浏览

var ws = new WebSocket('ws://localhost:9222/devtools/page/3c5c05fa-80b7-4cfe-8d1d-ebe79a7a5730');

ws.onopen= function() {

ws.send('{"id": 1, "method": "Page.navigate", "params": {"url": "https://www.fangdushi.com"}}')

};

ws.onmessage= function(evt) {

console.log('Received a message from the server!'+evt.data);

};

api文档地址https://chromedevtools.github.io/devtools-protocol/1-2

 

 

…

    
Read more

Linux ubuntu centos如何查看目录大小

admin 暂无评论 390 浏览

Linux ubuntu centos如何查看目录大小

du命令

参考文章：how to check directory size in Linux
用于显示目录或文件的大小。

  • 显示当前目录文件或者文件占用空间：du
  • 显示指定文件或文件夹的大小：du test.txt
  • 方便阅读的格式查看目录所占空间情况：du -h test
  • 仅显示当前文件夹的总计：du -s *
  • 以方便阅读的方式查看指定目录层级的空间占用情况：du -lh --max-depth=1

du命令排序

查看目录大小的命令是du（当然也可以查看文件大小），例如：du ems_data，就是查看ems_data目录下各子目录的大小；du，就是查看当前目录下各子目录的大小；du *，就是查看当前目录下各子目录和文件的大小。

为了提高查看效果，我们需要对结果进行排序，因为du的命令结果很乱，例如：

  • 从大到小排列：du ems_data | sort -nr
  • 按目录名排列：du ems_data | sort +1
…
Read more