JavaScript Advanced 1 Regular Expressions, Cookie Management, UserData_Basic Knowledge

首先，什么事正则表达式呢，其实引入概念很多时候并不能帮我们明白它到底是什么，所以我先简单描述下，正则表达式，其实就是一个记录字符串规则则的字符串，等我们看完这一部分，也就能明白它到底是什么了。

基本语法：正则表达式就是“/expression/”+表示搜索范围的符号。例如我们要找function这个关键词，就是/function/gi，其中g表示global，就是全局搜索，i表示ignor，就是忽略大小写。

在js中，我们通过RegExp类来实现。

这个类里面有很多很多的符号用来表示不同的索引方法，我先把这个表列一列：

元字符	说明	量词	说明	反义字符	说明
.	匹配除了换行符号(\n)以外的任意字符	*	出现次数：[0,+∞)	\W	字母，数字，下划线，汉字以外的字符
^	匹配字符串的开始	+	出现次数：[1,+∞)	\S	空白字符以外的字符
$	匹配字符串的结束	?	出现次数：[0,1]	\D	数字以外的字符
\b	匹配单词边界	{n}	出现次数：n	\B	匹配非单词的边界
\d	匹配数字	{n,}	出现次数：[n,+∞)	[^]	在字符类中，^号后面的字符串以外的任意字符
\s	匹配任意的空白符	{n,m}	出现次数：[n,m]	[-]	匹配从-前字符到-后字符的字符串中的字符/数字
\w	匹配字母，数字，下划线或汉字

In addition to the above symbols, there are three concepts: one is grouping, one is backreference, and the last is candidate.
Grouping: refers to enclosing strings with (), so that strings can be combined according to certain rules. At the same time, brackets can also be nested, such as using regular expressions to express the date format: var dateReg=/^(d{1,4})(-)(d{1,2}(-)(d{1 ,2})$), Of course, this method also has certain loopholes. Here we just express the format problem.
In addition to these, there are square brackets. For example, if you only want to match one of the letters x y z d w, then write [xyzdw]. If the match is continuous, such as numbers 0-4, then [0 -4], but this only represents one character.
If you want to write more than one, such as matching ac or bd, then use the "|" symbol and write (ac|bd).
For example, if we want to match a string containing only abc, we can write: abdReg=/^[abc] $/; The following is a complete example.

Copy code The code is as follows:

Reverse Directed reference: It is an application of regular expressions based on grouping. First of all, you need to know the group number: follow the order of the groups from left to right, marked by the left bracket, and start accumulating from 1. There are two ways to use it: $group number, or group number.
The second one is suitable for referencing groups in expressions. "" is an escape symbol, which has the same meaning as usual. It is used when matching reserved characters.
For example, we want to match a string that starts with abc, ends with abc, and has no limit in the middle: Reg=/^(abc)[a-z]*1$/; You can try this sentence in the example just now, I Tested and there were no errors.
Several commonly used matching regular expressions:
1. Matching date: reg=/^d{4}-(((0[13578]|(10|12))-(0[1-9] |[1-2]d|3[01]))|(02-(0[1-9])|[1-2]d)|((0[469]|11)-(0[1- 9]|[1-2]d|30)))$/g;
2. Matching time: reg=/^([0-1]d|[2][0-3](:([ 0-5]d)){2}$/g;
3. Matching email address: reg=/^([a-zA-Z]([0-9a-zA-Z]|(_))* @(([0-9a-zA-Z]|(_)) .) [a-zA-Z]{2,9})$/g;
4. Match Chinese characters: reg=/^[ u4e00-u9fa5] $/g;
Javascript operates cookies
I believe everyone knows what cookies are, so I just copied the definition without mercy.
The statements for operating cookies with js are as follows: document.cookie=name "="value ";expires=" date.toGMTString();
Next we will use cookies to record the user name and password for login

Copy code The code is as follows:

Explain that escape is a simple encryption, expires is the lifetime, which is generally set to one week, and will be automatically deleted after one week.
Of course, if you just write the cookie but don’t read it, it will be in vain, so you need to learn to read the contents of the cookie file.
So we added two reading functions to the script:

Copy the code The code is as follows:

In addition, add a sentence to the body tag onload event:

So, this code executes correctly in IE and FF, but the cookie cannot be retrieved in chrome. . I really can’t figure it out~ Does anyone know why? Please give me some advice orz
Modifying the cookie validity period is the same as modifying the cookie content. It just needs to find the expires field content and then modify it. If you want to delete the cookie, just delete it. Setting the validity period to yesterday is OK.
userData
Different from cookies, userData does not have a validity period and can store more data (640KB cookie: 4KB), so if the page input volume is large, userData can be used to store data.
Save data to userData: There are mainly two parts: give the content a name and save it to userData.
Before learning, please note that this was developed by Microsoft, so it is only applicable to IE. After testing, FF and chrome stated that this function is not compatible.
Here is a picture about the stored almanac:

OK Next, let’s take a look at userData.
First add a style before the script, and then save it to userData by setting parameters:

Copy code The code is as follows:

user name:

password:

title: td>
content:

🎜>

Copy code

The code is as follows: function getContent(){ var formObj=document. form; var contentObj=formObj.content;

contentObj.load("contentData");

contentObj.value=contentObj.getAttribute("contentText");
}


The complete program after modification:

Copy the code

The code is as follows:

title:
content:

好接下来说个兼容还算可以的：（下面这段都是抄的，因为转载太多我也不知道源出处了。）
localStorage： 相对于其他方案，localStorage有自身的优点：容量大、易用、强大、原生支持；缺点是兼容性差些（chrome, safari, firefox，IE 9，IE8都支持 localStorage，主要是IE8以下版本不支持）、安全性也差些（所以请勿使用localStorage保存敏感信息）。

非常通俗易懂的接口:

localStorage.getItem(key):获取指定key本地存储的值
localStorage.setItem(key,value)：将value存储到key字段
localStorage.removeItem(key):删除指定key本地存储的值

留意localStorage存储的值都是字符串类型，在处理复杂的数据时，比如json数据时，需要借助JSON类，将json字符串转换成真正可用的json格式，localStorage第二个实战教程会重点演示相关功能。localStorage还提供了一个storage事件，在存储的值改变后触发。
目前浏览器都带有很好的开发者调试功能，下面分别是Chrome和Firefox的调试工具查看

报废了好久，终于抖擞精神把进阶1写好了，以后不能再这么堕落了哎。。闭关修炼还是必须的~。