LocalStorage

localStorage的优势

localStorage拓展了cookie的4K限制
localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

localStorage的局限

浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
localStorage在浏览器的隐私模式下面是不可读取的
ocalStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
localStorage不能被爬虫抓取到
localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空这里我们以localStorage来分析。

if(！window.localStorage){

            alert("浏览器支持localstorage");

returnfalse;

        }else{

var storage=window.localStorage;

//写入a字段

            storage["a"]=1;

//写入b字段

            storage.b=2;

//写入c字段

            storage.setItem("c",3);

console.log(typeof storage["a"]);

console.log(typeof storage["b"]);

console.log(typeof storage["c"]);

运行后的结果如下：

这里要特别说明一下localStorage的使用也是遵循同源策略的，所以不同的网站直接是不能共用相同的localStorage

最后在控制台上面打印出来的结果是:

不知道各位读者有没有注意到，刚刚存储进去的是int类型，但是打印出来却是string类型，这个与localStorage本身的特点有关，localStorage只支持string类型的存储。

localStorage的读取

if(!window.localStorage){

            alert("浏览器支持localstorage");

        }else{

var storage=window.localStorage;

//写入a字段

            storage["a"]=1;

//写入b字段

            storage.b=2;

//写入c字段

            storage.setItem("c",3);

console.log(typeof storage["a"]);

console.log(typeof storage["b"]);

console.log(typeof storage["c"]);

//第一种方法读取

var a=storage.a;

console.log(a);

//第二种方法读取

var b=storage["b"];

console.log(b);

//第三种方法读取

var c=storage.getItem("c");

console.log(c);

localStorage就是相当于一个前端的数据库的东西，数据库主要是增删查改这四个步骤，这里的读取和写入就相当于增、查的这两个步骤

下面我们就来说一说localStorage的删、改这两个步骤

改这个步骤比较好理解，思路跟重新更改全局变量的值一样，这里我们就以一个为例来简单的说明一下。

if(!window.localStorage){

            alert("浏览器支持localstorage");

        }else{

var storage=window.localStorage;

//写入a字段

            storage["a"]=1;

//写入b字段

            storage.b=1;

//写入c字段

            storage.setItem("c",3);

console.log(storage.a);

// console.log(typeof storage["a"]);

// console.log(typeof storage["b"]);

// console.log(typeof storage["c"]);

/*分割线*/

            storage.a=4;

console.log(storage.a);

删除localStorage

将localStorage的所有内容清除

JS

var storage=window.localStorage;

            storage.a=1;

            storage.setItem("c",3);

console.log(storage);

            storage.clear();

console.log(storage);

将localStorage中的某个键值对删除

JS

var storage=window.localStorage;

            storage.a=1;

            storage.setItem("c",3);

console.log(storage);

            storage.removeItem("a");

console.log(storage.a);

控制台查看结果

localStorage的键获取

var storage=window.localStorage;

            storage.a=1;

            storage.setItem("c",3);

for(var i=0;i<storage.length;i++){

var key=storage.key(i);

console.log(key);

参考Window localStorage 属性 | 菜鸟教程

2. 什么是cookie

HTTP协议本身是无状态的。什么是无状态呢，即服务器无法判断用户身份。Cookie实际上是一小段的文本信息（key-value格式）。客户端向服务器发起请求，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie，以此来辨认用户状态。

打个比方，我们去银行办理储蓄业务，第一次给你办了张银行卡，里面存放了身份证、密码、手机等个人信息。当你下次再来这个银行时，银行机器能识别你的卡，从而能够直接办理业务。

3. cookie机制

当用户第一次访问并登陆一个网站的时候，cookie的设置以及发送会经历以下4个步骤：

客户端发送一个请求到服务器 –》 服务器发送一个HttpResponse响应到客户端，其中包含Set-Cookie的头部 –》 客户端保存cookie，之后向服务器发送请求时，HttpRequest请求中会包含一个Cookie的头部 –》服务器返回响应数据

image

为了探究这个过程，写了代码进行测试，如下：

我在doGet方法中，new了一个Cookie对象并将其加入到了HttpResponse对象中

JAVA

protectedvoiddoGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {

    Cookie cookie = new Cookie("mcrwayfun",System.currentTimeMillis()+"");

// 设置生命周期为MAX_VALUE

    cookie.setMaxAge(Integer.MAX_VALUE);

    resp.addCookie(cookie);

浏览器输入地址进行访问，结果如图所示：

可见Response Headers中包含Set-Cookie头部，而Request Headers中包含了Cookie头部。name和value正是上述设置的。

4. cookie属性项

属性项	属性项介绍
NAME=VALUE	键值对，可以设置要保存的 Key/Value，注意这里的 NAME 不能和其他属性项的名字一样
Expires	过期时间，在设置的某个时间点后该 Cookie 就会失效
Domain	生成该 Cookie 的域名，如 domain=”www.baidu.com“
Path	该 Cookie 是在当前的哪个路径下生成的，如 path=/wp-admin/
Secure	如果设置了这个属性，那么只会在 SSH 连接时才会回传该 Cookie

Expires

该属性用来设置Cookie的有效期。Cookie中的maxAge用来表示该属性，单位为秒。Cookie中通过getMaxAge()和setMaxAge(int maxAge)来读写该属性。maxAge有3种值，分别为正数，负数和0。

如果maxAge属性为正数，则表示该Cookie会在maxAge秒之后自动失效。浏览器会将maxAge为正数的Cookie持久化，即写到对应的Cookie文件中（每个浏览器存储的位置不一致）。无论客户关闭了浏览器还是电脑，只要还在maxAge秒之前，登录网站时该Cookie仍然有效。下面代码中的Cookie信息将永远有效。

JAVA

Cookie cookie = new Cookie("mcrwayfun",System.currentTimeMillis()+"");

// 设置生命周期为MAX_VALUE，永久有效

cookie.setMaxAge(Integer.MAX_VALUE);

resp.addCookie(cookie);

当maxAge属性为负数，则表示该Cookie只是一个临时Cookie，不会被持久化，仅在本浏览器窗口或者本窗口打开的子窗口中有效，关闭浏览器后该Cookie立即失效。

JAVA

Cookie cookie = new Cookie("mcrwayfun",System.currentTimeMillis()+"");

// MaxAge为负数，是一个临时Cookie，不会持久化

cookie.setMaxAge(-1);

resp.addCookie(cookie);

可以看到，当MaxAge为-1时，时间已经过期

当maxAge为0时，表示立即删除Cookie

JAVA

Cookie[] cookies = req.getCookies();

Cookie cookie = null;

// get Cookie

for (Cookie ck : cookies) {

if ("mcrwayfun".equals(ck.getName())) {

        cookie = ck;

break;

if (null != cookie) {

// 删除一个cookie

    cookie.setMaxAge(0);

    resp.addCookie(cookie);

那么maxAge设置为负值和0到底有什么区别呢？

maxAge设置为0表示立即删除该Cookie，如果在debug的模式下，执行上述方法，可以看见cookie立即被删除了。

maxAge设置为负数，能看到Expires属性改变了，但Cookie仍然会存在一段时间直到关闭浏览器或者重新打开浏览器。

修改或者删除Cookie

HttpServletResponse提供的Cookie操作只有一个addCookie(Cookie cookie)，所以想要修改Cookie只能使用一个同名的Cookie来覆盖原先的Cookie。如果要删除某个Cookie，则只需要新建一个同名的Cookie，并将maxAge设置为0，并覆盖原来的Cookie即可。

新建的Cookie，除了value、maxAge之外的属性，比如name、path、domain都必须与原来的一致才能达到修改或者删除的效果。否则，浏览器将视为两个不同的Cookie不予覆盖。

值得注意的是，从客户端读取Cookie时，包括maxAge在内的其他属性都是不可读的，也不会被提交。浏览器提交Cookie时只会提交name和value属性，maxAge属性只被浏览器用来判断Cookie是否过期，而不能用服务端来判断。

我们无法在服务端通过cookie.getMaxAge()来判断该cookie是否过期，maxAge只是一个只读属性，值永远为-1。当cookie过期时，浏览器在与后台交互时会自动筛选过期cookie，过期了的cookie就不会被携带了。

Cookie的域名

Cookie是不可以跨域名的，隐私安全机制禁止网站非法获取其他网站的Cookie。

正常情况下，同一个一级域名下的两个二级域名也不能交互使用Cookie，比如test1.mcrwayfun.com和test2.mcrwayfun.com，因为二者的域名不完全相同。如果想要mcrwayfun.com名下的二级域名都可以使用该Cookie，需要设置Cookie的domain参数为**.mcrwayfun.com**，这样使用test1.mcrwayfun.com和test2.mcrwayfun.com就能访问同一个cookie

一级域名又称为顶级域名，一般由字符串+后缀组成。熟悉的一级域名有baidu.com，qq.com。com，cn，net等均是常见的后缀。

二级域名是在一级域名下衍生的，比如有个一级域名为mcrfun.com，则blog.mcrfun.com和www.mcrfun.com均是其衍生出来的二级域名。

Cookie的路径

path属性决定允许访问Cookie的路径。比如，设置为”/“表示允许所有路径都可以使用Cookie

sessionStroage

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。

sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

提示: 如果你想在浏览器窗口关闭后还保留数据，可以使用 localStorage 属性，该数据对象没有过期时间，今天、下周、明年都能用，除非你手动去删除。

this

HTML

<body>

<!-- 解析器在调用函数每次都会向函数内部传递一个隐含的参数

        这个函数的参数就是this，this指向的是一个对象，

        这个对象成为函数执行的上下文对象

        根据函数调用方式不同，this会指向不同的对象

        1.this以函数的形式调用时，this永远都是window

        2.this以方法的形式调用时，this就是调用发放的那个对象

-->

<script>

functionfun(){

console.log(this.name)

var obj= {

name:"孙悟空",

sayName: fun

};

var obj2= {

name:"猪八戒",

sayName: fun

};

//   console.log(obj.sayName== fun)

fun();

   obj.sayName();

   obj2.sayName();

</script>

</body>

使用工厂方法创建对象

HTML

<script>

functionxiyouji(name,gender,age){

var per= newObject()

    per.name=name

    per.gender=gender

    per.age= age

    per.sayname= functione(){

        alert(this.name)

return per;

var per1 = xiyouji("孙悟空","男","18");

var per2= xiyouji("猪八戒","男","18");

console.log(per1)

console.log(per2)

    per2.sayname();

//    function createdog(name,age){

//   var  dog =new  Object()

//    dog.name = name

//    dog.age= age

//    dog.sayhello=function e(){

//        alert("汪汪汪")

//    }

//    return dog;

//    }

//    var dog1=createdog("gg","6")

//    console.log(dog1)

//    dog1.sayhello()

//    console.log(per1)

</script>

构造函数

为了区分不同的类（人，狗），可以通过构造函数的方式来实现

构造函数执行流程：

立即创建一个新的对象
将新建的对象设置为函数中的this，在构造函数中可以使用this来引用新建的对象
逐行执行函数中的代码
将新建的对象作为返回值返回

HTML

<script>

functionPerson(name,gender,age){

this.name=name

this.gender=gender

this.age= age

this.sayname=functione(){

        alert('你好')

var per =new Person("ch","男","21")

console.log(per)

       per.sayname()

</script>

所有的对象都是Object()的后代

原型对象

HTML

<scripttype="text/javascript">

/*

			 * 创建一个构造函数

*/

functionMyClass(){

//向MyClass的原型中添加一个name属性

			MyClass.prototype.name = "我是原型中的名字";

var mc = new MyClass();

			mc.age = 18;

//console.log(mc.name);

//使用in检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true

//console.log("name" in mc);

//可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性

//使用该方法只有当对象自身中含有属性时，才会返回true

//console.log(mc.hasOwnProperty("age"));

//console.log(mc.hasOwnProperty("hasOwnProperty"));

/*

			 * 原型对象也是对象，所以它也有原型，

			 * 	当我们使用一个对象的属性或方法时，会现在自身中寻找，

			 * 		自身中如果有，则直接使用，

			 * 		如果没有则去原型对象中寻找，如果原型对象中有，则使用，

			 * 		如果没有则去原型的原型中寻找,直到找到Object对象的原型，

			 * 		Object对象的原型没有原型，如果在Object原型中依然没有找到，则返回undefined

*/

//console.log(mc.__proto__.hasOwnProperty("hasOwnProperty"));

//console.log(mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));

//console.log(mc.__proto__.__proto__.__proto__);

//console.log(mc.hello);

//console.log(mc.__proto__.__proto__.__proto__)

总而言之，MyClass()可以当爸爸，通过MyClass()创建的对象是儿子，MyClass()则是爷爷，爷爷或者爸爸的基因从儿子身上可以显现，但不是本身创造的基因，如果要追根溯源，可以从爷爷或者爸爸身上找到这个基因，这就是构成了原型链。im

JavaScript基础③

LocalStorage

localStorage的优势

localStorage的局限

localStorage的读取

删除localStorage

2. 什么是cookie

3. cookie机制

4. cookie属性项

Expires

修改或者删除Cookie

Cookie的域名

Cookie的路径

sessionStroage

this

使用工厂方法创建对象

构造函数

原型对象

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

JavaScript基础③

LocalStorage

localStorage的优势

localStorage的局限

localStorage的读取

删除localStorage

cookie

2. 什么是cookie

3. cookie机制

4. cookie属性项

Expires

修改或者删除Cookie

Cookie的域名

Cookie的路径

sessionStroage

this

使用工厂方法创建对象

构造函数

原型对象

热门文章

最新文章

相关课程

相关电子书

相关实验场景