javascript

JS的Session操作

admin web前端 暂无评论 62 浏览

在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 编程 暂无评论 68 浏览

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前端 暂无评论 69 浏览
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

js禁止鼠标右键及禁止F12查看源代码

admin web前端 暂无评论 159 浏览

F12审查元素的情况下，可以随机更改代码，注入恶意JS等等，避免这种情况如下：

一、屏蔽F12 审查元素

<script>
    document.onkeydown = function () {
        if (window.event && window.event.keyCode == 123) {
            alert("F12被禁用");
            event.keyCode = 0;
            event.returnValue = false;
        }
        if (window.event && window.event.keyCode == 13) {
            window.event.keyCode = 505;
        }
        if (window.event && window.event.keyCode ==
…
Read more

js格式化时间戳

admin web前端 暂无评论 103 浏览 
//datetime是拿到的时间戳
var date = new Date(datetime);//时间戳为10位需*1000，时间戳为13位的话不需乘1000 
var year = date.getFullYear(),
    month = ("0" + (date.getMonth() + 1)).slice(-2),
    sdate = ("0" + date.getDate()).slice(-2),
    hour = ("0" + date.getHours()).slice(-2),
    minute = ("0" + date.getMinutes()).slice(-2),
    second = ("0" + date.getSeconds()).slice(-2);
// 拼接
var
…
Read more

使用JavaScript动态变量名

admin web前端 暂无评论 128 浏览

在编程中，动态变量名称在脚本中没有硬编码的特定名称。它们使用来自其他来源的字符串值动态命名。JavaScript 中很少使用动态变量。但在某些情况下，它们很有用。与 PHP 不同，JavaScript中没有动态变量名的特殊实现。但是通过使用其他一些方法也可以获得类似的结果。在 JavaScript 中，可以使用下面给出的 2 种方法/方式来实现动态变量名称。

eval()： eval() 函数计算在参数中表示为字符串的 JavaScript 代码。字符串作为参数传递给 eval()。如果字符串表示表达式，则 eval() 计算表达式。在 eval() 中，我们传递一个字符串，其中声明了变量valuei ，并为每次迭代分配了i的值。eval() 函数执行此操作并使用分配的值创建变量。下面给出的代码实现了使用 eval() 创建动态变量名。

例子：

<script>
    var k = 'value';
    var i = 0;
    for(i = 1; i < 5; i++)
…
Read more

原写给后端程序员的前端开发流程与正确姿势.

admin web前端 暂无评论 230 浏览

写给后端程序员的前端开发流程与正确姿势.

关键词:node.js,npm,webpack,laravel mix,package.json,js代码压缩.

一直以来,后端程序员可能出于对前端的不太熟悉,尤其对于现代的前端工程化更不太熟悉.一看到nodejs,npm等名词就发懵.但后端程序员在实践中还是多多少少会接触前端的.可能你需要修改别人的前端代码,或自己开发前端代码(您可能是全栈程序员了).

想必你修改或写前端代码,也和我以前一样,直接从网上找模板(包括html,css.js)修改成自己样式.或自己从头写html.css.js.

不管是哪种类型,你一般是直接修改Html页面里引入的css.js吧:).

你可能也有些困惑 ,怎么别人的js代码看着像加密过似的,不知如何下手修改?

而你自己从头写的css,js则会直接被引入到Html页面里.

css,js代码里有一些注释,还有一些空格,空行等内容 ,直接在html页里引用是其实是没有经过压缩(去空格,去空行,去注释)的代码.会加大网络传输量,导致加载会慢一些.

而且,你写的js.没有经过压缩(去空格,注释,变量,函数重命名为短名称等),导致别人可能会偷盗你的代码.

如果你压缩了js后,再发布你的代码 ,而你的js看起来像经过加密一样,别人也基本看不懂你的代码了.

而你要做的就是开发代码与发布代码相分离.

本教程教你使用laravel-mix进行正确前端开发(注:laravel-mix最初是用于php框架laravel的前端资源编译工作 ,现在可用于任何语言的任何前端项目).

 

你项目的目录结构应该如下:

my-app/

----------index.html

-----------src/

----------------app.css

----------------app.js

-----------dist/

-----------------app.js

-----------------app.css

 

其中src为源码目录或开发目录,dist为发布目录,index.html为你的页面,…

                    
Read more