解析 URL Params 为对象

let url = 'http://www.domain.com/?user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&enabled';
parseParam(url)
/* 结果
{ user: 'anonymous',
id: [ 123, 456 ], // 重复出现的 key 要组装成数组,能被转成数字的就转成数字类型
city: '北京', // 中文需解码
enabled: true, // 未指定值得 key 约定为 true
}
*/
function parseParam(url) {
const paramsStr = /.+\?(.+)$/.exec(url)[1]; // 将 ? 后面的字符串取出来
const paramsArr = paramsStr.split('&'); // 将字符串以 & 分割后存到数组中
let paramsObj = {};
// 将 params 存到对象中
paramsArr.forEach(param => {
if (/=/.test(param)) { // 处理有 value 的参数
let [key, val] = param.split('='); // 分割 key 和 value
val = decodeURIComponent(val); // 解码
val = /^\d+$/.test(val) ? parseFloat(val) : val; // 判断是否转为数字 if (paramsObj.hasOwnProperty(key)) { // 如果对象有 key,则添加一个值
paramsObj[key] = [].concat(paramsObj[key], val);
} else { // 如果对象没有这个 key,创建 key 并设置值
paramsObj[key] = val;
}
} else { // 处理没有 value 的参数
paramsObj[param] = true;
}
}) return paramsObj;
}
const getUrlKey = function (name) {
return (
decodeURIComponent(
(new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
location.href
) || [, ""])[1].replace(/\+/g, "%20")
) || null
)
}
 
/**
* 封装检验数据类型
*/
 const isType = type => target => `[object ${type}]` ===              Object.prototype.toString.call(target)
const isArray = isType('Array')
console.log(isArray(''))
/**
* 存储localStorage
*/
export const setStore = (name, content) => {
if (!name) return
if (typeof content !== 'string') {
content = JSON.stringify(content)
}
window.localStorage.setItem(name, content)
} /**
* 获取localStorage
*/
export const getStore = name => {
if (!name) return
return window.localStorage.getItem(name)
} /**
* 删除localStorage
*/
export const removeStore = name => {
if (!name) return
window.localStorage.removeItem(name)
} /**
* 设置cookie
*/
export const setCookie = (key, value, day) => {
const date = new Date()
date.setDate(date.getDate() + day)
document.cookie = key + '=' + value + ';expires=' + date + ';path=/'
} /**
* 获取cookie
*/
export const getCookie = cname => {
const name = cname + '='
const ca = document.cookie.split(';')
for (let i = 0; i < ca.length; i++) {
let c = ca[i]
while (c.charAt(0) === ' ') c = c.substring(1)
if (c.indexOf(name) !== -1) return c.substring(name.length, c.length)
}
return ''
} /**
* 删除cookie
*/
export const delCookie = name => {
const exp = new Date()
exp.setTime(exp.getTime() - 1)
const cval = getCookie(name)
if (cval != null) {
document.cookie = name + '=' + cval + ';expires=' + exp.toGMTString() + ';path=/'
}
} /**
* 获取url参数
*/
export const getUrlId = name => {
const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
const r = window.location.search.substr(1).match(reg)
if (r != null) return unescape(r[2])
return null
}

JS基石之-----常用方法封装的js库的更多相关文章

  1. js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用)

    js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用) 一.总结 2.匿名函数作为参数传递 二.js进阶ajax函数封装 ajax1.js function ajax(ur ...

  2. JsQuick--个人封装的Js库

    JsQuick 该库为本人封装的Js库,尚未进行浏览器兼容 /** * 快速框架 版本:1.0.0 * 日期:2015.02.26 * 作者:简楚恩 */ /** * 快速获取控件类 */ var $ ...

  3. sChart.js:一个小型简单的图表库

    介绍 sChart.js 作为一个小型简单的图表库,没有过多的图表类型,只包含了柱状图.折线图.饼状图和环形图四种基本的图表.麻雀虽小,五脏俱全.sChart.js 基本可以满足这四种图表的需求.而它 ...

  4. Numeral.js – 格式化和操作数字的 JavaScript 库

    Numeral.js 是一个用于格式化和操作数字的 JavaScript 库.数字可以格式化为货币,百分比,时间,甚至是小数,千位,和缩写格式,功能十分强大.支持包括中文在内的17种语言. 您可能感兴 ...

  5. Vis.js – 基于浏览器的动态 JavaScript 可视化库

    Vis.js 是一个动态的,基于浏览器的可视化库.该库被设计为易于使用,能处理大量的动态数据.该库由以下几部分组成:一是数据集和数据视图,基于灵活的键/值数据集,可以添加,更新和删除项目,订阅数据集变 ...

  6. Gremlins.js – 模拟用户随机操作的 JS 测试库

    Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...

  7. Device.js——检测设备平台、操作系统的Javascript 库

    http://segmentfault.com/a/1190000000373735 Device.js 是一个可以让你检测设备的平台,操作系统和方向 JavaScript 库,它会自动在 <h ...

  8. 最简单的原生js和jquery插件封装

    最近在开发过程中用别人的插件有问题,所以研究了一下,怎么封装自己的插件. 如果是制作jquery插件的话.就将下面的extend方法换成  $.extend 方法,其他都一样. 总结一下实现原理: 将 ...

  9. Baffle.js – 用于实现文本模糊效果的 JavaScript 库

    Baffle.js 是一个 JavaScript 库,设计用来模糊和揭开DOM元素的文本. 这些元素可以是一个 CSS 选择器的形式.一个节点列表或者一个单节点. 你也可以传递一个选择对象给插件. 在 ...

随机推荐

  1. SSI注入--嵌入HTML页面中的指令,类似jsp、asp对现有HTML页面增加动态生成内容,见后面例子

    SSI注入漏洞总结 from:https://www.mi1k7ea.com/2019/09/28/SSI%E6%B3%A8%E5%85%A5%E6%BC%8F%E6%B4%9E%E6%80%BB%E ...

  2. MySQL数据库 介绍,安装,基本操作

    - 数据库介绍: 1.随意存放在一个文件中的数据,数据的格式千差万别 tank|123 jason:123 sean~123 2.软件开发目录规范 - Project: - conf - bin - ...

  3. %STSADM% -o addsolution -filename AEMediaPlayerWebpart.wsp

    SET STSADM="c:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\16\bin\STSADM. ...

  4. Excel-信息函数&数组公式

    1.IS系列函数-逻辑函数 is函数是一个逻辑函数,可以用来判断一些特定的内容 Istext判断单元格是否是文本 Isnumber判断单元格是否为数值 Istext和isnumber的判断的结果相反 ...

  5. B1043 输出PATest (20 分)

    一.技术总结: 对于哈希字符处理方式,一般是用一个数组存储字符出现的次数,然后再考虑后续. 同时,在输出时,比如这题要输出指定几个字符,我们可以首先统计下这几个字符一共出现的次数sum,然后输出一个就 ...

  6. [LeetCode] 6. ZigZag Conversion 之字型转换字符串

    The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows like ...

  7. 使用logstash同步mysql数据库信息到ElasticSearch

    本文介绍如何使用logstash同步mysql数据库信息到ElasticSearch. 1.准备工作 1.1 安装JDK 网上文章比较多,可以参考:https://www.dalaoyang.cn/a ...

  8. 黑科技!两行代码完美解决:同时设置overflow-x:hidden,overflow-y:visible无效的问题

    不废话,直接上代码 <!DOCTYPE html> <html> <head> <style> body { padding: 0; margin: 0 ...

  9. Go Windows 环境安装及配置(一)

    首先安装windows的包 go1.12.6.windows-amd64.msi cmd 查看下环境变量 go env set GOARCH=amd64 --架构 amd64/arm set GOBI ...

  10. jenkins 更新插件使用代理

    方法一: 管理插件页面配置如下: 这个 URL 改成http://mirror.xmission.com/jenkins/updates/update-center.json 或https://mir ...