正则cookie

1.cookie

1, 什么是cookie?

cookie原意为"甜饼", 在js中表示浏览器文档中的一个数据字段, 它的值是一段字符串, 存储在浏览器中

2, cookie有什么用?

当用户访问网站时,cookie用来记录用户的重要信息,再次访问网站时,通过cookie识别用户信息,实现: 自动登陆, 用户提醒, 收藏, 收缩历史等功能

3, cookie和webStorage的区别?

(1),cookie数据量小,整个域名内最多存储限制为 4KB

webStorage数据量大, 整个域名内最多存储限制为 5MB

(2),cookie不仅仅存在于浏览器本地, 它可以随请求发给服务器,由服务器读取和修改

webStorage只能存储在浏览器本地,服务器无法读取和修改

(3),cookie是传统的前端技术,很早就用了, html5新增了webStorage功能

(4),cookie是document的属性, 而webStorage是window的属性

4, cookie的用法

*/

// 注意: 谷歌浏览器不支持file://协议打开cookie, 要使用服务器环境打开

// cookie虽然是一个字符串, 但字符串中是键值对结构

document.cookie = "name=张三"

// cookie值是键值对结构,赋值的新键值对不会覆盖老键值对,会同时存在

document.cookie = "age=20"

// cookie键值对中键是唯一的, 赋值已有的键会会把对应值更新

document.cookie = "age=30"

// 如果数据没有设置键, 默认键为空,

document.cookie = "李四"

document.cookie = "王五"

// cookie默认是会话存储, 和sessionStorage相似, 窗口关闭则清理

// 我们可以给cookie添加数据是,设置cookie的有效期, 和localStorage相似, 在过期之前,cookie不会被清理

// 在键值对后使用expires设置过期时间点, 到达这个时间点, cookie此键值对被清理

console.log(new Date)

document.cookie = "sex=男;expires=Date Thu Mar 10 2022 09:58:08 GMT+0800"

// 例子: 设置一个有效期为1小时的cookie值

var now = new Date()

now.setHours(now.getHours() + 1)

document.cookie = "sex=男;expires="+now

// 例子: 设置一个有效期为1小时的cookie值

// 也可以使用max-age设置cookie有效时常,默认单位秒,支持计算

document.cookie = "phone=110;max-age=60*60"

console.log(document.cookie)

// 需求: 从本地cookie中取出年龄age值

var arr = document.cookie.split("; ")

console.log(arr)

var str = arr.find(function(item){

// startsWith 判断字符串是否以某一段字符开头

return item.startsWith("age=")

})

console.log(str)

console.log(str.split("=")[1])

2.jquary-cookie插件

<script src="jquery.js"></script>
<script src="jquery.cookie.js"></script>
<script>
    console.log(document.cookie);
    // 1, 增, $.cookie() 函数保存数据, 两个参数分别是字段名和字段值
    // jQuery插件在保存cookie信息是会把汉字用urlencoded编码处理
    $.cookie("username", "张三");
    $.cookie("password", "123");
    $.cookie("age", 20);
    // 以上保存cookie都是临时的,没有有效期, 可以添加第三个参数设置有效期
    $.cookie("sex", "男", {
        // 有效期7天, 会在7天后过期清除
        expires: 7
    })
    $.cookie("phone", "110", {
        // 这条数据会在2019年12月5号上午10点过期
        expires: new Date("2019-12-5 10:00:00")
    })
    console.log(document.cookie);
​
    // 2, 删, 使用$.removeCookie()删除字段,参数是字段名
    $.removeCookie("age");
    console.log(document.cookie);
​
​
    // 3, 改, 和增加语法一样,字段存在就修改, 没有就新增
    $.cookie("password", "abc");
    console.log(document.cookie);
​
    // 4, 查, $.cookie()写一个参数表示查询字段的值
    console.log($.cookie("username"))
​
​
    // cookie使用举例: 网页自动登录
    if ($.cookie("account")) {
        alert("欢迎回来:" + $.cookie("account"))
    } else {
        var string = prompt("请登录")
        if (string.length > 0) {
            $.cookie("account", string, {
                expires: 1
            })
        }
    }
​
</script>
​
</html>

3.正则表达式

正则表达式: regular expression 也叫规则表达式, 用于字符串的检索和判断

使用正则来判断一个字符串是否符合一定规则或是否包含一定规则的字符

正则匹配的字符串数据来源1,用户输入 2,数据请求 3,本地读取

// 正则表达式在js中以对象的形式描述的, 它有两种创建方法

// 1, 字面量创建 /正则语法/

var myReg1 = /\d/ // 匹配一个数字,只要字符串中包含数组都可

// 2, new关键字创建

var myReg2 = new RegExp(/\d+/) // 匹配至少连续1个数字

exec() 函数指用正则去匹配一个字符串, 查找一个字符串中符合正则的字符

正则最后添加字母g, 表示全局匹配, 可以得到所有符合规则的结果

正则表达式默认是区分大小写字母的, 添加i可以不区分大小写

1. var myReg1 = /\d/ // 匹配一个数字,只要字符串中包含数组都可

var myReg2 = new RegExp(/\d+/) // 匹配至少连续1个数字

var myReg3 = /\d/g // 匹配字符串中的每一位数字

var myReg4 = /\d+/g // 匹配字符串中的每个连续数字

var myReg5 = /^a+/i // 匹配以字母a开头的连续字母a

var myReg6 = /^a[a-z]+/i // 匹配以字母a开头的连续任意字母

var myReg7 = /[xyz]/gi // 找到的所有的大小写字母x和y和z

var myReg8 = /red|blue|green/gi // 找到的所有的大小写单词红蓝绿

var myReg8 = new RegExp(/red|blue|green/, "gi") // new创建时gi可写入参数2

替换敏感词

var myReg14 = /小可爱|王者荣耀|和平精英/ig     // 匹配敏感字符
            result = string.replace(myReg14, "*")
            // document.writeln(result)
​
            // replace的第二个参数可以写成回调函数
            result = string.replace(myReg14, function(item){
                console.log(item)  // 参数item是匹配的结果
                if(item == "fuck") return "f**k"
                // 返回值是要替换的结果
                return item.replace(/[^ ]/g, "*")
            })
            document.writeln(result)

正则语法总结

    ^   匹配一个字符串的开头(是否以某个字符开头), 如果放在中括号中表示排除某些字符
    $   匹配一个字符串的结束(是否以某个字符结束)
    .   匹配任意一位字符
    *   匹配它前边字符任意长度
    +   匹配它前边字符至少一个, 长度>=1
    ?   匹配前边的字符0个或1个(可有可无)
    \d  匹配一位数字 
    {n} 匹配n个它前边的字符
    {n,}    匹配至少n个它前边的字符
    {n,m}   匹配至少n个,最多m个它前边的字符    
    [0-9]   匹配一位数字   等价于  \d
    [a-z]   匹配任意一个小写字母
    [A-Z]   匹配任意一位大写字母
    \w      匹配任意数字,字母或下划线 等价于  [0-9a-zA-Z_]
    [0123456789]  匹配一位或0位数字  
    [abc]   匹配a或b或c或没有
    a|b|c   匹配a或b或c其中之一
    \       转义, 把正则语法转译成普通字符  比如  \*  匹配*这个字符