javascript

this指向问题,标签上绑定onclick事件this指向问题

<input type="button" value="修改" οnclick="changeContent()">

写在元素上onclick里面的函数changeContent,相当于函数直接调用,函数里面使用的this指向全局对象window,

而不是指向该元素

 

那么要获取onclick所在节点的object,我们则需要在调用function时就把this传递过去:

<input type="button" value="修改" οnclick="changeContent(this)">

这里的this指这个input标签,$(this)将其变为jq对象;

function changeContent(e){

var _this = $(this)

}

JS实现随机生成字符串的方法(可指定长度)

1.定义随机截取字符串

const _charStr = 'abacdefghjklmnopqrstuvwxyzABCDEFGHJKLMNOPQRSTUVWXYZ0123456789';

2.定义随机生成索引函数

/**
 * 随机生成索引
 * @param min 最小值
 * @param max 最大值
 * @param i 当前获取位置
 */
function RandomIndex(min, max, i){
    let index = Math.floor(Math.random()*(max-min+1)+min),
        numStart = _charStr.length - 10;
    //如果字符串第一位是数字,则递归重新获取
    if(i==0&&index>=numStart){
        index = RandomIndex(min, 

你还在直接用 localStorage 么?该提升下逼格了

很多人在用 localStoragesessionStorage 的时候喜欢直接用,明文存储,直接将信息暴露在;浏览器中,虽然一般场景下都能应付得了且简单粗暴,但特殊需求情况下,比如设置定时功能,就不能实现。就需要对其进行二次封装,为了在使用上增加些安全感,那加密也必然是少不了的了。为方便项目使用,特对常规操作进行封装。不完善之处会进一步更新...(更新于:2022.07.04 17:30) 已更新。

设计

封装之前先梳理下所需功能,并要做成什么样,采用什么样的规范,部分主要代码片段是以 localStorage作为示例,最后会贴出完整代码的。可以结合项目自行优化,也可以直接使用。

// 区分存储类型 type
// 自定义名称前缀 prefix
// 支持设置过期时间 expire
// 支持加密可选,开发环境下未方便调试可关闭加密

// 支持数据加密 这里采用 crypto-js 加密 也可使用其他方式

// 判断是否支持 Storage isSupportStorage

// 设置 setStorage

// 获取 getStorage

// 是否存在 

11个罕见的 JavaScript 单行代码,会让你大吃一惊

在今天的文章中,我将与你一起来学习 11 个罕见但功能强大的单行代码。现在,准备好,让我们开始吧!

如果你想给专业开发人员留下深刻印象,你会做什么?很简单:用简单的逻辑和尽可能少的代码行来解决一个复杂的问题。随着 ES6 箭头函数的引入,可以创建看起来优雅而简单的单行代码。

在今天的文章中,我将与你一起来学习 11 个罕见但功能强大的单行代码。现在,准备好,让我们开始吧!

1、获取字符串中的字符数

获取字符数是一个有用的实用程序,在许多情况下都很有用,我们可以使用它来获取空格数和随后的单词数,或者这可用于获取字符串中某个分隔符的计数。

const characterCount = (str, char) => str.split(char).length - 1

 

这个想法很简单,我们使用传递的参数 char 拆分字符串并获取返回数组的长度。由于每次将字符串拆分,都会比拆分器多一个;所以减去 1,我们有一个 characterCount 单行。

2、检查对象是否为空

检查对象的空性实际上比看起来要困难得多,即使对象为空,每次检查对象是否等于 {} 也会返回

JavaScript – PC 端通过纯 js 播放音频文件(播放提示音)

前言

有时候,我们可能有这样一个需求,当到达条件时,网页会播放一个提示音告知用户。

实现

当然,你也可以写一个 标签,通过 js 获取 DOM,来操作。

// 创建<audio>标签(参数:音频文件路径)
const audio = new Audio('x.mp3');

// 业务逻辑
if(1){
  //...
  // 播放声音
  audio.play();
}

 

JS的Session操作

在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来进行相应的设置。

谢谢!!!

sessionStorage详解

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