commonSense

一、session与cookie区别

session存储在服务端,
session会在一定时间内保存在服务器上,当访问增多,会比较站服务器性能,考虑性能方面,应当用cookie
session是服务端技术,服务器在运行的时候可以为每个用户的浏览器创建一个独享的session对象,
由于session为用户浏览器独享,所以用户在访问服务器的web资源时,可以把各自的数据放在各自的session中,当用户再去访问服务器中的其它web资源时,其它web资源再从用户各自的session中取出数据为用户服务。

cookie存储在客户端,
别人可以分析存储在本地的cookie并进行cookie欺骗,考虑安全问题应当用session
单个cookie保存数据不超过4k,很多浏览器限制一个站点最多保存20个cookie
cookie是客户端技术,程序把用户的信息以cookie的形式存储在用户各自的浏览器。当用户使用浏览器再去访问服务器中的web资源时,就会带着各自的数据去。这样,web资源处理的就是用户各自的数据了。

如不设置cookie的过期时间,则表示cookie的生命周期为浏览器的会话期间,关闭浏览器窗口,cookie就消失。
会话cookie存储在内存里,如设置了过期时间,浏览器会把cookie存在硬盘上,存在硬盘上的cookie可以在不同浏览器进程之间共享。

*HTML5Web存储

html5提供两种在客户端存储数据的方法

localStorage-没有时间限制的数据存储
sessionStorage-针对一个session的数据存储
之前这些都是有cookie完成。但是cookie不适合大量数据的存储,因为他们由每个对服务器的请求来传递,这使得cookie速度慢且效率也不高
在html5中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使得在不影响网站性能的情况下存储大量数据成为可能

eg:localStorage方法存储的数据没有时间限制。第二天、第二周或下一年,数据依然可用

统计页面访问次数
<script>
if(localStorage.pagecount){ localStorage.pagecount=Number(localStorage.pagecount)+1;
}else{
localStorage.pagecount=1;
}
document.write("Visits"+localStorage.pagecount+"times");
</script>

sessionStorage方法针对一个sessionStorage进行数据存储。当用户关闭浏览器窗口后,数据会被删除
eg下面的例子对用户在当前session中访问页面的次数进行计数:

<script>
if(sessionStorage.pagecount){
sessionStorage.pagecount=Number(sessionStorage.pagecount)+1;
}else{

sesssionStorage.pagecount=1;
}
document.write("Visits"+sessionStorage.pagecount+"times this session");
</script>

清空storage

  • localStorage.clear();*

localStorage的优势与局限
优势:
1.扩展了cookie的4k限制;
2.可以将第一次请求的数据直接存储在本地,相当于一个5M大小的针对前端页面的数据库,相比于cooki可以节约带宽(但却只有高版本的浏览器才支持);
局限:
1.浏览器的大小不统一,并且在IE8以上的浏览器才支持这个属性;
2.目前所有的浏览器都会把localStorage的值类型限定为string类型,比较常见的json对象类型需要一些转换(可以使用JSON.stringify()这个方法,来将JSON转换成为JSON字符串);
3.在浏览器的私密模式下是不可读取的(读取之后要将JSON字符串转换成为JSON对象,使用JSON.parse()方法);
4.其本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,导致页面变卡;
5.不能被爬虫抓取到;
localStorage与sessionStorage的唯一区别就是localStorage属于永久性存储,二sessionStorage属于当会话结束的时候,sessionStorage中的键值对会被清空

localStorage的写入有三种(三种读取):

var storage = window.localStorage;
// 三种写入
storage["a"]=1; // 写入a字段
storage.b=1; // 写入b字段
storage.setItem("c",3); // 写入c字段
console.log(typeof storage["a"]); // string
console.log(typeof storage["b"]); // string
console.log(typeof storage["c"]); // string
// 三种读取
var a = storage.a; //第一种读取
var b = storage["b"]; //第二种读取
var c = storage.getItem("c"); //第三种读取
// **修改storage的值 **
storage.a=4;
console.log(storage.a); // 4
注:通过getItem或者使用storage["key"]获取到的信息均为实际存储的副本
*eg:
storage.key={value1:"value1"};
storage.key.value1="a";
这里是无法对实际存储的值产生作用的,这种写法也不可以:storage.getItem("key").value1="a";

// 删除storage
storage.removeItem("key");//删除名称为“key”的信息。
storage.clear();​//清空localStorage中所有信息
console.log(storage.a); // undefined
// localStorage的键获取
for(var i=0;i<storage.lenght;i++){
var key = storage.key(i);
console.log(key);
}

使用key()方法,向其中出入索引即可获取对应的键

注:localStorage的使用遵循同源策略,所以不同的网站直接是不能共用相同的localStorage

二、js判断用户的浏览器设备是移动端还是pc端

<script type="text/javascript">
# function browserRedirect() {
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
document.writeln("您的浏览设备为:");
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
document.writeln("phone");
} else {
document.writeln("pc");
}
}

    browserRedirect();

</script>

三. 判断是否微信浏览器中打开

<script type="text/javascript">
#function is_weixn(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
return true;
} else {
return false;
}
}

四. 前后端交互协议

restful协议

五. 常见浏览器兼容问题

1).不同浏览器的标签默认的margin和padding不同,所以设置margin,padding 为0;
2).条件注释,css hack,特定浏览器标示的样式
-ms- -moz- -webkit- ...
3).IE透明度的处理
4).javascript的兼容性 如event事件 e || window.event

六、javascript闭包

补充:
(function(){...code...})(); 自执行匿名函数
解释:包围函数的第一对括号向脚本返回未命名的函数,随后一对空括号立即执行返回的未命名函数,括号内为匿名函数的参数。
作用:可以用它创建命名空间,只要把自己所有的代码都写在这个函数包装内,外部就不能访问,除非你允许变量前加window,这样该函数或变量就成为全局。各js库的代码基本也是这种组织形式。


闭包是javascript语言的一个难点,也是它的特色,很多高级应用都是依靠闭包实现。

1、变量的作用域

要理解闭包,首先必须能理解javascript特殊的变量作用域。
变量的作用域无非就两种:全局变量和局部变量。
javascript语言的特殊之处,就是在函数内部可以直接读取全局变量;另一方面,在函数外部自然无法读取函数内部的局部变量。
这里有一个需要注意,函数内部声明变量的时候,一定要使用var命令,如果不用,实际上声明了一个全局变量。

2、如何从外部读取局部变量

那就是在函数内部,再定义一个函数

  var n=999;
  function f2(){
    alert(n); // 999
  } 

}```

在上面的代码中,函数f2就被包括在函数f1内部,这是f1内部所有的局部变量,对f2都是可见的,但反过来不行,这就是javascript语言特有的“链式作用域”结构,子对象会一级一级得向上寻找所有父对象的变量,所以,父对象的所有变量,对子对象都是可见的,反之则不成立。
既然f2可以读取f1中的局部变量,只要把f2作为返回值,我们就可以在f1的外部读取他的内部变量了

3、闭包的概念

上面代码中的f2函数,就是闭包。
闭包就是能够读取其他函数内部变量的函数
由于在javascript语言中,只有在函数内部的子函数才能读取局部变量,因此可以把闭包简单的理解成“定义在一个函数内部的函数”
所以,在本质上 ,闭包就是将函数内部和函数外部连接起来的一座桥梁。

4、闭包的用途

闭包可以用在很多地方。它最大的用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。

5、使用闭包的注意点

1)由于闭包会使得函数的变量被保存在内存中,内存消耗大,所以不能滥用闭包,否则造成网页性能问题,在IE中可能造成内存泄漏。解决的办法,在退出函数的时候,将不是用的局部变量全部删除。
2)闭包会在父函数的外部改变父函数内部变量的值。

七、CSS2与CSS3的区别

css3是最新的版本,效果上css2是比不了的,比如定义圆角、背景颜色渐变、背景图片大小控制和定义多个背景图片等,这是css2上没有的效果。但是css3开发网站的话考虑一些低版本的浏览器可能还不支持。

css3代码更简洁、页面结构更合理,性能和效果得到兼顾;
css3的动态流概念很好,类似FLASH味道,这个css2.0无法比拟;
css3数据更精简实用,许多css2.0要用图片做效果,他不需要,直接代码;
css2要请求服务器次数明显高于css3,所以性能和访问要明显差点。
但目前来讲,css3是新事物,大部分浏览器还不支持css3.

八、css盒模型

margin (外边框)
border(边框)
padding(内边框)
content(内容)
css盒模型本质上是一个盒子,封装周围的html元素,它包括:边距、边框、填充和实际内容。

DIV+CSS两种盒子模型

盒子模型有两种:分别是IE盒子模型标准W3C盒子模型
IE盒子模型的范围包括margin、border、padding、content,其content部分包含了border和padding
W3C盒子模型的范围包括margin、border、padding、content,并且content部分不包含其他部分。

两种盒子模型应该选择哪种呢

当然是标准W3C盒子模型了。在网页的顶部加上DOCTYPE声明,如果不加DOCTYPE声明,那么各个浏览器会按自己的行为去理解网页,会导致网页在不同浏览器显示不一致。

九、css3 box-sizing属性

规定两个并排的带边框的框

box-sizing 属性有三值:content-box(default), padding-box, border-box。
content-box:border和padding不计算入Width之内(标准模式);
padding-box: padding计算入width内;
border-box: border和padding都计算入width之内(传统IE模式)。

十一、js数据类型

字符串、数字、布尔、对象、null、undefined
js定义了6中基本数据类型即:number、string、boolean、object、null、undefined。
其中object包括Function,Array,Date,RegExp(正则表达)
另外还有Symbol事ES2015的新特性。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容

  • 1. cookie 1.1 什么是cookie cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过...
    cbw100阅读 4,050评论 0 13
  • 常见试题 行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置line-h...
    他大舅啊阅读 2,416评论 1 5
  • 前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:...
    秀才JaneBook阅读 2,326评论 0 25
  • 缓存问题一直是我们在日常开发中需要特别关注的事情。 在日常的开发中,做好数据的缓存能使我们的程序执行效率更高,并且...
    范佳昌ryan阅读 1,769评论 1 12
  • 前些日子在忙着面试,拿了心仪的 offer 以后闲下来整理了一些面试相关的基本概念。由于很多关于代码细节的东西之前...
    faremax阅读 1,392评论 0 4