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

基本语法：正则表达式就是“/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 匹配字母，数字，下划线或汉字        

除了上述符号外，还有三个概念：一个是分组，一个是反向引用，最后是候选。 
分组：就是指用()把字符串括起来，这样可以让字符串根据某种规律来组合。同时，括号还可以进行嵌套，比如用正则表达式来表达日期的格式：var dateReg=/^(\d{1,4})(-)(\d{1,2}(-)(\d{1,2})$),当然，这个方式也有一定的漏洞，这里只是表示一下格式问题。 
除了这些之外还有方括号，比如你只希望匹配x y z d w 这几个字母中的一个，那就写[xyzdw],如果匹配的是连续的，比如0-4的数字那就[0-4],但是这个是只表示一个字符的。 
如果要写多个，比如匹配ac或者bd，那么就用“|”符号，写 (ac|bd)。 
比如我们要匹配一个只包含abc的字符串，那么可以写: abdReg=/^[abc]+$/; 下面是个完整的例子。

复制代码代码如下:
<html> 
<head> 
<title>regular express</title> 
<script type="text/javascript" > 
var str="agedaga"; 
var str2="acbaaaccbac"; 
var abcReg=/^[abc]+$/g; 
var test1=false; 
var test2=false; 
if(abcReg.test(str)) 
test1=true; 
if(abcReg.test(str2)) 
test2=true; 
document.write("result of string "+str+" is: "+test1+"<br> resulet of string "+str2+" is: "+test2); 
</script> 
</head> 
<body > 
<body> 
</html> 

反向引用：是建立在分组基础上的正则表达式的应用。首先要知道分组号：按照分组从左到右的顺序以左括号为标志，从1开始累加。使用办法有俩：$分组号，或者 \分组号。 
第二种适用于在表达式中引用分组的情况，其中“\”是转义符号，跟平时的意思一样，在需要匹配保留字符的时候就是用它。 
比如我们要匹配一个abc开头，abc结尾，中间不限的字符串：Reg=/^(abc)[a-z]*\1$/; 可以把这一句放在刚才的例子里尝试一下，我测试了下没有错误。 
几个常用的匹配正则式： 
1.匹配日期：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.匹配时间：reg=/^([0-1]\d|[2][0-3](:([0-5]\d)){2}$/g; 
3.匹配邮箱：reg=/^([a-zA-Z]([0-9a-zA-Z]|(_))*@(([0-9a-zA-Z]|(_))+\.)+[a-zA-Z]{2,9})$/g; 
4.匹配中文字符：reg=/^[\u4e00-\u9fa5]+$/g; 
javascript操作cookies 
cookie是什么相信大家都了的，所以我也就不死气巴咧的抄定义了。 
用js操作cookie的语句如下：document.cookie=name+"="value+";expires="+date.toGMTString(); 
接下来我们就用cookie来记录用户登陆的用户名和密码

复制代码代码如下:
<html> 
<head> 
<title>cookie test</title> 
<script type="text/javascript" > 
function setCookie(cookieName,cookieValue,expires){ 
document.cookie=cookieName+"="+escape(cookieValue)+";expires="+expires.toGMTString(); 
} 
function conf(){ 
var form=document.form; 
var uname=form.username.value; 
var upasw=form.pasw.value; 
var expires=new Date(); 
expires.setTime(expires.getTime()+(7*24*60*60*1000)); 
setCookie("username",uname,expires); 
alert("cookie seted"); 
} 
</script> 
</head> 
<body > 
<form name="form" method="post" action="#"> 
<table width="300" align="center" border="1"> 
<tr> 
<td align="center" >user name:<input type="text" name="username" ></td> 
</tr> 
<tr> 
<td align="center" >password: <input type="password" name="pasw" ></td> 
</tr> 
<tr> 
<td align="center" ><input type="button" name="confirm" value="confirm" onclick="conf()"></td> 
</tr> 
</table> 
</form> 
<body> 
</html> 

说明一下escape是简单的加密，expires是生存期，一般定为一周，一周后自动删除。 
当然如果仅仅写cookie但是不读的话就白瞎了，于是要学会读取cookie文件的内容。 
于是我们在script里面加入两个读取用的函数：

复制代码代码如下:
<script type="text/javascript" > 
function getCookie(cookieObj, cookieName){ 
var startIndex=cookieObj.indexOf(cookieName); 
if(startIndex==-1) return null; // no cookie 
startIndex+=cookieName.length+1; //alert(startIndex); 
var endIndex=cookieObj.indexOf(";",startIndex); 
if (endIndex==-1) 
endIndex=cookieObj.length; 
return unescape(cookieObj.substring(startIndex,endIndex)); 
} 
function getInfo(){ 
var form=document.form; 
var cookie=document.cookie; 
var userName=getCookie(cookie,"username");// get cookie by cookiename 
if(userName&&userName.length>0) 
form.username.value=userName; 
else 
alert("no cookie info!"); 
} 
</script> 

此外还要再body标签添一句onload事件： 
<body onload="getInfo()" > 
于是，这段代码在IE和FF里执行无误，在chrome里死活出不来cookie。。我实在是想不明白啦~有知道为什么的大侠么~求赐教orz 
修改cookie有效期跟修改cookie内容一样的，不过是找到expires字段内容，然后修改，如果要删除cookie，就把它的有效期设置为昨天就OK了。 
userData 
跟cookie不同的地方是，userData可以没有有效期并且可以存储更多的数据(640KB cookie：4KB)，所以如果页面输入量较大时，可以使用userData来存储数据。 
保存数据到userData：主要是两部分：给内容起个名字，把它存到userData中。 
学习之前要注意的是，这个是微软开发的，所以仅适用于IE，经过测试，FF和chrome表示不兼容此功能。 
这里有个图是写关于存储的年历表的：

OK接下来看看userData。 
首先要在script前加个style，然后通过设置参数的方法把它给保存到userData里：

复制代码代码如下:
<html> 
<head> 
<title>cookie test</title> 
<style> 
.userData 
{ 
behavior:url(#default#userdata); 
} 
</style> 
<script type="text/javascript" > 
function conf(){ 
var formObj=document.form; 
var contentObj=document.content; 
contentObj.setAttribute("contentText",contentObj.value); 
contentObj.save("contentData"); // 保存在contentData存储区 
} 
</script> 
</head> 
<body > 
<form name="form" method="post" action="#"> 
<table width="400" align="center" border="1"> 
<tr> 
<td>title:</td> 
<td><input type="text" name="title" size="50"></td> 
</tr> 
<tr> 
<td>content:</td> 
<td><textarea name="content" class="userData" cols="45" rows="10"></textarea></td> 
</tr> 
<tr align="center"> 
<td colspan="2" align="center"><input type="button" name="Save" value="confirm" onclick="conf()"></td> 
</tr> 
</table> 
</form> 
<body> 
</html> 

获取的函数跟存储是相反的过程，就是取出来其实很好理解： 
添加一个function：

复制代码代码如下:
function getContent(){ 
var formObj=document.form; 
var contentObj=formObj.content; 
contentObj.load("contentData"); 
contentObj.value=contentObj.getAttribute("contentText"); 
} 

改好后的完整程序：

复制代码代码如下:
<html> 
<head> 
<title>cookie test</title> 
<style> 
.userData{behavior:url(#default#userData);} 
</style> 
<script type="text/javascript" > 
function saveContent(){ 
var formObj=document.form; 
var contentObj=formObj.content; 
contentObj.setAttribute("contentText", contentObj.value); 
contentObj.save("contentData"); // 保存在contentData存储区 
alert("saved"); 
} 
function getContent(){ 
var formObj=document.form; 
var contentObj=formObj.content; 
contentObj.load("contentData"); 
contentObj.value=contentObj.getAttribute("contentText"); 
} 
</script> 
</head> 
<body onload="getContent()"> 
<form name="form" method="post" action="#"> 
<table width="400" align="center" border="1"> 
<tr> 
<td>title:</td> 
<td><input type="text" name="title" size="50"></td> 
</tr> 
<tr> 
<td>content:</td> 
<td><textarea name="content" class="userData" cols="45" rows="10"></textarea></td> 
</tr> 
<tr align="center" > 
<td colspan="2"> 
<input type="button" name="Save" value="confirm" onclick="saveContent()"> 
</td> 
</tr> 
</table> 
</form> 
<body> 
</html> 

好接下来说个兼容还算可以的：（下面这段都是抄的，因为转载太多我也不知道源出处了。） 
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写好了，以后不能再这么堕落了哎。。闭关修炼还是必须的~。

您可能感兴趣的文章:

javascript 进阶篇1 正则表达式，cookie管理，userData的更多相关文章

  1. ＃笔记＃JavaScript进阶篇一

    #JavaScript进阶篇 http://www.imooc.com/learn/10 #认识DOM #window对象 浏览器窗口可视区域监测—— 在不同浏览器(PC)都实用的 JavaScrip ...

  2. 4、JavaScript进阶篇①——基础语法

    一.认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面 ...

  3. JavaScript进阶篇 - -第1章 系好安全带

    第1章 系好安全带 html,body { font-size: 15px } body { font-family: Helvetica, "Hiragino Sans GB", ...

  4. 6、JavaScript进阶篇③——浏览器对象、Dom对象

    一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...

  5. Javascript进阶篇——总结--DOM案例+选项卡效果

    断断续续的把慕课的JavaScript基础和进阶看完了,期间不怎么应用有的都忘记了,接下来多开始写些效果,进行实际应用. 制作一个表格,显示班级的学生信息. 1. 鼠标移到不同行上时背景色改为色值为 ...

  6. 慕课网javascript 进阶篇 第九章 编程练习

    把平常撸的码来博客上再撸一遍既可以加深理解,又可以理清思维.还是很纯很纯的小白,各位看官老爷们,不要嫌弃.最近都是晚睡,昨晚也不例外,两点多睡的.故,八点起来的人不是很舒服,脑袋有点晕呼呼,鉴于昨晚看 ...

  7. JavaScript进阶篇QA总结

    Q1:常用的运算符有哪些?他们的优先级是怎样的?A1:1.算术运算符:加(+).减(-).乘(×).除(÷),自加一(++),自减一(--):2.比较运算符:大于(>).小于(<).大于等 ...

  8. 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果

    利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居     200万内购五环三居 140万安家东三环     北京首现零首付楼 ...

  9. 二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象 控制HTML元素

    1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...

随机推荐

  1. jsp编译原理

    jsp运行时都要先转换成servlet,使用tomcat时会在tomcat安装目录下的work生成一系列的运行的项目文件夹,文件下面含有.java文件和编译后的.class文件.jsp最终转化为ser ...

  2. 【日常训练】Help Victoria the Wise（Codeforces 99C）

    题意与分析 这题意思是这样的:在正方体的六面镶嵌给定颜色的宝石(相同颜色不区分),然后问最多有几种彼此不等价(即各种旋转过后看起来一致)的方案. 其实可以乱搞,因为范围只有720.求出全排列,然后每个 ...

  3. Cisco Packet Tracer中两台电脑通信设置

    Cisco Packet Tracer是网络初学者仿真模拟网络环境的必备工具.今天我们来模拟下两台电脑之间的通信. Cisco Packet Tracer版本6.2.0 一.添加设备 1.这里添加一个 ...

  4. Linux中的mysql指令

    如何启动/停止/重启MySQL一.启动方式1.使用 service 启动:service mysqld start2.使用 mysqld 脚本启动:/etc/inint.d/mysqld start3 ...

  5. rest的Web服务端获取http请求头字段

    如上图所示 输出的i就是获取的头字段的值 (仅自己记录)

  6. pandas安装以及出现的问题

    pandas安装以及出现的问题 1.pandas 安装 pandas是Python的第三方库,所以使用前需要安装一下,直接使用pip install pandas就会自动安装,安装成功后显示的以下的信 ...

  7. HTML6的10个高级新特性

    网络技术正趋向于发展为一个巨大的移动APP市场,在Web开发的革命浪潮中起着指示性作用,自HTML引入以来,应用程序变得So easy,web开发中运用先进技术也很容易处理各种复杂Bug. 作为专业的 ...

  8. docker run 和docker start的区别

    docker run 只在第一次运行时使用,将镜像放到容器中,以后再次启动这个容器时,只需要使用命令docker start 即可. docker run相当于执行了两步操作:将镜像放入容器中(doc ...

  9. 分享一篇IBN（Intent-based networking）调研报告

    IBN调研报告 背景 SDN(Software-defined network):最大特点在于具有松耦合的控制平面与数据平面.支持集中化的网络状态控制.实现底层网络设施对上层应用的透明.具有灵活的软件 ...

  10. Yii2 创建新项目目录

    默认的高级应用模板包括三个应用 backend – 应用的后台 frontend – 应用的前台 console – 应用的控制台应用 那么如果我们要在增加应用呢?比如在加一个手机端的应用,或者后台和 ...