年轻即出发

前端面试题---小米（总结知识点）

1、CSS选择器有哪些？

选择器	例子	例子描述	CSS
.class（Class选择器）	.intro	选择 class="intro" 的所有元素。	1
#id（ID选择器）	#firstname	选择 id="firstname" 的所有元素。	1
*（全局选择器）	*	选择所有元素。	2
element（标签选择器）	p	选择所有元素。	1
element,element（兄弟选择器）	div,p	选择所有元素和所有元素。	1
element element	div p	选择元素内部的所有元素。	1
element>element（父子选择器）	div>p	选择父元素为元素的所有元素。	2
element+element	div+p	选择紧接在元素之后的所有元素。	2
[attribute]	[target]	选择带有 target 属性所有元素。	2
[attribute=value]	[target=_blank]	选择 target="_blank" 的所有元素。	2
*[attribute~=value]*	[title~=flower]	选择 title 属性包含单词 "flower" 的所有元素。	2
*[attribute\|=value]*	[lang\|=en]	选择 lang 属性值以 "en" 开头的所有元素。	2
:link	a:link	选择所有未被访问的链接。	1
:visited	a:visited	选择所有已被访问的链接。	1
:active	a:active	选择活动链接。	1
:hover	a:hover	选择鼠标指针位于其上的链接。	1
:focus	input:focus	选择获得焦点的 input 元素。	2
:first-letter	p:first-letter	选择每个元素的首字母。	1
:first-line	p:first-line	选择每个元素的首行。	1
:first-child	p:first-child	选择属于父元素的第一个子元素的每个元素。	2
:before	p:before	在每个元素的内容之前插入内容。	2
:after	p:after	在每个元素的内容之后插入内容。	2
:lang(language)	p:lang(it)	选择带有以 "it" 开头的 lang 属性值的每个元素。	2
element1~element2	p~ul	选择前面有元素的每个元素。	3
[attribute^=value]	a[src^="https"]	选择其 src 属性值以 "https" 开头的每个元素。	3
[attribute$=value]	a[src$=".pdf"]	选择其 src 属性以 ".pdf" 结尾的所有元素。	3
[attribute=value*]	a[src*="abc"]	选择其 src 属性中包含 "abc" 子串的每个元素。	3
:first-of-type	p:first-of-type	选择属于其父元素的首个元素的每个元素。	3
:last-of-type	p:last-of-type	选择属于其父元素的最后元素的每个元素。	3
:only-of-type	p:only-of-type	选择属于其父元素唯一的元素的每个元素。	3
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个元素。	3
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个元素。	3
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。	3
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个元素的每个元素。	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。	3
:last-child	p:last-child	选择属于其父元素最后一个子元素每个元素。	3
:root	:root	选择文档的根元素。	3
:empty	p:empty	选择没有子元素的每个元素（包括文本节点）。	3
:target	#news:target	选择当前活动的 #news 元素。	3
:enabled	input:enabled	选择每个启用的元素。	3
:disabled	input:disabled	选择每个禁用的元素	3
:checked	input:checked	选择每个被选中的元素。	3
:not(selector)	:not(p)	选择非元素的每个元素。	3
::selection	::selection	选择被用户选取的元素部分。	3

jQuery 选择器

元素元素

选择器	实例	选取
*	$("*")	所有元素
#id	$("#lastname")	id="lastname" 的元素
.class	$(".intro")	所有 class="intro" 的元素
element	$("p")	所有元素
.class.class	$(".intro.demo")	所有 class="intro" 且 class="demo" 的元素

:first	$("p:first")	第一个元素
:last	$("p:last")	最后一个元素
:even	$("tr:even")	所有偶数
:odd	$("tr:odd")	所有奇数

:eq(index)	$("ul li:eq(3)")	列表中的第四个元素（index 从 0 开始）
:gt(no)	$("ul li:gt(3)")	列出 index 大于 3 的元素
:lt(no)	$("ul li:lt(3)")	列出 index 小于 3 的元素
:not(selector)	$("input:not(:empty)")	所有不为空的 input 元素

:header	$(":header")	所有标题元素 -
:animated		所有动画元素

:contains(text)	$(":contains('W3School')")	包含指定字符串的所有元素
:empty	$(":empty")	无子（元素）节点的所有元素
:hidden	$("p:hidden")	所有隐藏的元素
:visible	$("table:visible")	所有可见的表格

s1,s2,s3	$("th,td,.intro")	所有带有匹配选择的元素

[attribute]	$("[href]")	所有带有 href 属性的元素
[attribute=value]	$("[href='#']")	所有 href 属性的值等于 "#" 的元素
[attribute!=value]	$("[href!='#']")	所有 href 属性的值不等于 "#" 的元素
[attribute$=value]	$("[href$='.jpg']")	所有 href 属性的值包含以 ".jpg" 结尾的元素

:input	$(":input")	所有元素
:text	$(":text")	所有 type="text" 的元素
:password	$(":password")	所有 type="password" 的元素
:radio	$(":radio")	所有 type="radio" 的元素
:checkbox	$(":checkbox")	所有 type="checkbox" 的元素
:submit	$(":submit")	所有 type="submit" 的元素
:reset	$(":reset")	所有 type="reset" 的元素
:button	$(":button")	所有 type="button" 的元素
:image	$(":image")	所有 type="image" 的元素
:file	$(":file")	所有 type="file" 的元素

:enabled	$(":enabled")	所有激活的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有被选取的 input 元素
:checked	$(":checked")	所有被选中的 input 元素

2、position的几种定位

一、常见/用的四种
1.static

positon定位的默认值，没有定位

2.relative

生成相对定位的元素，相对于其正常位置进行定位，一般在子元素设置absoute定位时，给父元素设置relative

元素的位置通过top、right、bottom、left 控制，其值的定位起点都是是父元素左上角(这点和absoute、fixed不一样)

3.absoute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位

元素的位置通过top、right、bottom、left 控制，top、left的定位起点是包含块左上角，right、bottom的定位起点是包含块右下角

4.fixed （ie6不兼容）

生成绝对定位的元素，相对于浏览器窗口进行定位，和absoute的区别是fixed不会跟随屏幕滚动(常见的各种贴屏广告)

元素的位置通过top、right、bottom、left 控制，top、left的定位起点是包含块左上角，right、bottom的定位起点是包含块右下角

二、不常用的四种
1.inherit

规定应该从父元素继承 position 属性的值

inherit 关键字可用于任何 HTML 元素上的任何 CSS 属性

兼容：ie7及以下版本不支持此属性

2.initial

设置positon的值为默认值(static)

兼容：ie不支持此属性

问：有了static为什么还会存在此属性，不是多此一举？

答：initial 关键字可用于任何 HTML 元素上的任何 CSS 属性，不是postion特有的

3.unset

设置positon的值为不设置：

如果该属性的默认属性是继承属性(例如字体相关的默认属性基本都是继承)，该值等同于 inherit
如果该属性的默认属性不是继承属性(例如pisition的默认属性为static)，该值等同于 initial

兼容：ie不支持此属性

4.sticky(粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。)

css3新属性，它的表现就像position:relative和position:fixed的合体:

1.在目标区域在屏幕中可见时，它的行为就像position:relative;

2.页面滚动时

当父元素是body时

a.滚动距离小于屏幕高度或宽度，它会固定在目标位置

b.滚动距离大于屏幕高度或宽度，它的表现就像position:relative和1一样

元素不是body，在父元素高度内滚动时它会固定在目标位置，就像fixed

在父元素滚动为不可视时它的表现就像position:relative和1一样

兼容： ie不兼容、google不完全兼容（thead、tr标签不支持）、firefox59以后兼容，之前版本不完全兼容(table标签不支持)

附上链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

3、数组去重

1.第一种方式就是最简单的set去重(o(n))

var arr = [1,2,2,4,3,4,1,3,2,7,5,6,1]；

var newArr = new Set(arr)

2.第二种方式就是用indexOf来去重(o(n^3))

判断新数组中某个数字是否存在

function fn(arr){
   let newArr = []
   arr.forEach((val)=>{
         if(newArr.indexOf(val) == -1){
              newArr.push(val)
          }
    })    
   return newArr  
}

3.第三种方式普通去重(o(n^3))

for(var i=0;i

4.键值去重(o(n^3))

根据键值是唯一的来去重

function fn(arr){
let arr1 = [],

arr2 = []

arr.forEach((val)=>{

arr1[val]=val

})

//arr1数组会存在空的情况

//所以返回arr2

arr1.forEach((val)=>{

if(!!val){

arr2.push(val)

}

})

return arr2

}

5.sort排序后去重（o(n^2)）

只比set复杂度低

function fn(arr){
   let newArr = []
   arr.sort((a,b)=>{
       return a-b
   })
   arr.forEach((val,index)=>{
       if(val != arr[index+1]){
            newArr.push(val)
       }
   })
   return newArr
}

6、for遍历

function distinct(a, b) {
    let arr = a.concat(b)
    let result = []
    let obj = {}

    for (let i of arr) {
        if (!obj[i]) {
            result.push(i)
            obj[i] = 1
        }
    }

    return result
}

7、include去重

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    var array =[];
    for(var i = 0; i < arr.length; i++) {
            if( !array.includes( arr[i]) ) {//includes 检测数组是否有某个值
                    array.push(arr[i]);
              }
    }
    return array
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
    console.log(unique(arr))
    //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]     //{}没有去重

8、利用hasOwnProperty

function unique(arr) {
    var obj = {};
    return arr.filter(function(item, index, arr){
        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
    })
}
    var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
        console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}]   //所有的都去重了

利用hasOwnProperty 判断是否存在对象属性

9、利用filter

function unique(arr) {
  return arr.filter(function(item, index, arr) {
    //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
    return arr.indexOf(item, 0) === index;
  });
}
    var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
        console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, "NaN", 0, "a", {…}, {…}]

10、利用reduce+includes

function unique(arr){
    return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr));
// [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]

延伸知识点：

常规indexOf与if判断写法：

1 if("112233".indexOf("22")>-1) {
2     console.log("很二");
3 }else {
4     console.log("怎么一点都不二");
5 }

以上代码是否是我们平时在写js逻辑时最常用写法，是否觉得有点out？来看看下面的装逼写法（PS:大神请忽略）

1 if(~"112233".indexOf("22")) {
2     console.log("很二");
3 }else {
4     console.log("怎么一点都不二");
5 }

注意indexOf前面的“~”，位运算：-1取反为0，0在if判断里面false

按位非 ~ 处理的巧用就来看看~1的计算步骤：

本文链接：https://blog.csdn.net/zjl199303/article/details/82586323

将1(这里叫：原码)转二进制＝ 00000001

按位取反＝ 11111110

发现符号位(即最高位)为1(表示负数)，将除符号位之外的其他数字取反＝ 10000001（符号位为0代表正数）

末位加1取其补码＝ 10000010

转换回十进制＝ -2

如 ~1 = -2; ~2 = -3;

应用：

~取反的用法是，是因为-1的取反操作等于0，而其他数的取反操作不等于0。

所以用indexOf操作符可以用~操作来判断某个字符串里是否有某个字符。

var str = '123456'

if(~str.indexOf(0)){ // ~str.indexOf(0) != 0 包含

console.log('取反之后不为零，说明indexOf的结果不等于-1，所以表示str字符串里包含了对应字符')

} else { // ~str.indexOf(0) == 0 不包含

console.log('说明取反之后为零，说明indexOf的结果等于-1，所以表示str字符串里不包含了对应字符')

js中 ~(按位非)运算符妙用

2018-12-20 10:14:12 SSSkyCong 阅读数 136更多

分类专栏：转载学习-总结-转载 H5

转载：https://www.aliyun.com/jiaocheng/363385.html

摘要：基础知识:某个数值的按位非操作,可以简单的理解为该值取负值后减1例如:~5=-5-1=-6~-5=5-1=4~4=-4-1=-5原理:二进制数的负数是取该二进制数的补码,然后+1。二进制数,最高位为0表示正数,最高位为1表示负数。(最高位分不同情况存储不一样)5的二进制表示:00000101(假设最高位为8位)补码:11111010-5:11111011(~)按位非操作其实就是取补码的过程,也就是上述求该值负数的逆过程,所以可以简单的理解为该值取负值后减1。5的补码就是~5,

基础知识:
某个数值的按位非操作,可以简单的理解为该值取负值后减1
例如:
~5 = -5-1 = -6
~-5 = 5-1 = 4
~4 = -4-1 = -5

原理:
二进制数的负数是取该二进制数的补码,然后+1。
二进制数,最高位为0表示正数,最高位为1表示负数。(最高位分不同情况存储不一样)
5的二进制表示:00000101 (假设最高位为8位)
补码:11111010
-5:11111011

(~)按位非操作其实就是取补码的过程,也就是上述求该值负数的逆过程,所以可以简单的理解为该值取负值后减1。

5的补码就是~5,那么~5+1 = -5,所以~5 = -5-1 = -6

应用:
1、indexOf()
判断数组或者字符串中是否存在某个元素,一般使用indexOf()如下:

if(str.indexOf(query) != -1) {}
if(str.indexOf(query) >= 0) {}
现在可以更加清爽和高端的写成:

if(~str.indexOf(query)) {}
原理:
不存在返回-1,~-1 = 0 ,大于-1的值,0,1,2,3 ... 按位非的值1,2,3,4...都大于0

ps: 这种写法可不仅仅的B格高这么简单,位运算相对于比较运算符效率高,对于一次运算本身来说,可能相差无几,但在循环次数过大,比如超过了10000000次,效率就会有差距。

2、~~value的使用
对于浮点数,~~value可以代替parseInt(value),而且前者效率更高些

parseInt(-2.99) //-2
~~(-2.99) //-2
ps: 这些技巧可能会给阅读代码的同学造成困扰,如果不知道原理的话,甚至让人费解。因此平时写代码的时候,要根据情况决定采用哪种写法。

4、两个字符串找最大公共子串

//查找两个字符串的最长公共子串

function findSubStr(s1,s2){

  var S=sstr= "" ,L1=s1.length,L2=s2.length;

  if (L1>L2){ var s3=s1;s1=s2,s2=s3,L1=s2.length;}

  for ( var j=L1;j> 0 ;j--)

    for ( var i= 0 ;i<=L1-j;i++){

      sstr = s1.substr(i,j);

      if (s2.indexOf(sstr)>= 0 ) return sstr;

    }

  return "" ;

}

document .writeln(findSubStr( "aaa3333" , "baa333cc" )); //aa333

document .writeln(findSubStr( "aaaX3333--" , "baa333ccX3333333x" )); //X3333

延伸：

JS求最长公共子序列、最大公共子串、最大子段和

2018.09.19 13:38:10字数 86阅读 1628

一、最长公共子序列

// 求最长公共子序列的长度
function lcs(str1, str2) {
    var len1 = str1.length;
    var len2 = str2.length;
    var dp = []; // 首先定义一个一维数组
    for (var i = 0; i <= len1; i++) {
      dp[i] = []; // 将一维数组升级为二维数组
      for (var j = 0; j <= len2; j++) {
        if (i == 0 || j == 0) {
          dp[i][j] = 0;
          continue;
        }
        if (str1[i - 1] == str2[j - 1]) { // dp 的维度为 (len1+1)*(len2+1),str 的维度为 (len1)*(len2)
          dp[i][j] = dp[i - 1][j - 1] + 1;
        } else {
          dp[i][j] = Math.max(dp[i][j - 1], dp[i - 1][j]); // 否则取当前位置上或左的最大数
        }
      }
    }
    return dp[len1][len2]; // 返回二维数组最后一个值
  }
  console.log(lcs('abcda', 'bcdda')); // 4

// 打印出最长公共子序列
function lcs(str1, str2) {
    var len1 = str1.length,
      len2 = str2.length;
    var dp = [];
    for (var i = 0; i <= len1; i++) {
      dp[i] = [];
      for (var j = 0; j <= len2; j++) {
        if (i == 0 || j == 0) {
          dp[i][j] = 0;
          continue;
        }
        if (str1[i - 1] == str2[j - 1]) {
          dp[i][j] = dp[i - 1][j - 1] + 1;
        } else {
          dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
        }
      }
    }
    var result = printLCS(dp, str1, str2, len1, len2);
    return result;
  }
  // 打印公共子序列
  function printLCS(dp, str1, str2, i, j) {
    if (i == 0 || j == 0) {
      return "";
    }
    if (str1[i - 1] == str2[j - 1]) {
      return printLCS(dp, str1, str2, i - 1, j - 1) + str1[i - 1];
    } else if (dp[i][j - 1] > dp[i - 1][j]) {
      return printLCS(dp, str1, str2, i, j - 1);
    } else {
      return printLCS(dp, str1, str2, i - 1, j);
    }
  }
  console.log(lcs('abcda', 'bcdda')); // bcda

二、最大公共子串

function findSubStr(str1, str2){
    if (str1.length > str2.length) {
      var temp = str1;
      str1 = str2;
      str2 = temp;
    }
    var len1 = str1.length,
      len2 = str2.length;
    for (var j = len1; j > 0; j--) {
      for (var i = 0; i < len1 - j; i++) {
        var current = str1.substr(i, j);
        if (str2.indexOf(current) >= 0) {
          return current;
        }
      }
    }
    return "";
  }
  console.log(findSubStr("aaa3333", "baa333cc")); // aa333
  console.log(findSubStr("aaaX3333--", "baa333ccX3333333x")) // X3333

三、最大子段和

function maxSum(arr) {
    var current = 0,
      sum = 0;
    for (var i = 0; i < arr.length; i++) {
      if (current > 0) {
        current += arr[i];
      } else {
        current = arr[i];
      }
      if (current > sum) {
        sum = current;
      }
    }
    return sum;
  }
  console.log(maxSum([1, 2, -1, 3, -8, -4])); // 5

5、字符串找最长连续数字子序列，输出长度

js 正则找出最长连续子串长度

function maxLenStr(str){
var len = 0, max_len = 0;
var reg = new RegExp("(.)\\1{1,}","g");
var res = reg.exec(str);
while(res != null){
len = res[0].length;
if(max_len < len){
max_len = len;
}
res = reg.exec(str)
}
return max_len;
}

6、唠一唠cookie和webStorage？

本文链接：https://www.jianshu.com/p/084ea697f33d

Cookies和WebStorage区别

Cookie的诞生
由于HTTP协议是无状态的，而服务器端的业务必须是要有状态的。Cookie诞生的最初目的是为了存储web中的状态信息，以方便服务器端使用。比如判断用户是否是第一次访问网站。目前最新的规范是RFC 6265，它是一个由浏览器服务器共同协作实现的规范。
Cookie的实行步骤
1.服务器像客户端发送cookie。
2.浏览器将将cookie以key/value保存到某个目录的文本文件内。
3.之后每次http请求浏览器都会将cookie发送给服务器端。（前提是浏览器设置为启用cookie）
4.cookie通过HTTP请求报文和响应报文配合完成会话过程。
cookie 的缺点
1.cookie体积过大会造成请求和响应速度变慢。
2.默认浏览器会任何请求都把cookie带上去（即使不需要），哪怕是静态资源。
3.cookie可以在前后端修改，数据容易篡改或伪造。
4.cookie对于敏感数据的保护基本是无效的。
5.有些用户是禁用掉cookie的。
6.cookie 不能跨越多个域名使用。
7.单个 cookie 保存的数据不能超过 4k ，很多浏览器都限制一个站点最多保存 20 个 cookie。

为了破解Cookie的一系列限制，HTML5通过JS的新的API就能直接存储大量的数据到客户端浏览器，而且支持复杂的本地数据库，让JS更有效率。 HTML5支持两种的WebStorage：
1.永久性的本地存储（localStorage）：持久化的本地存储（浏览器关闭重新打开数据依然存在），:永久的，除非手动删除。
特点：
① 域内安全、永久保存。即客户端或浏览器中来自同一域名的所有页面都可访问localStorage数据且数据除了删除否则永久保存，但客户端或浏览器之间的数据相互独立。
② 数据不会随着Http请求发送到后台服务器；
③ 存储数据的大小机会不用考虑，因为在HTML5的标准中要求浏览器至少要支持到4MB。
2.会话级别的本地存储（sessionStorage）：针对一个session的本地存储，临时的，窗口关闭就没有了。（会话级别）。
特点：
①会话控制、短期保存。会话概念与服务器端的session概念相似，短期保存指窗口或浏览器或客户端关闭后自动消除数据。

**Cookie和webstorage区别 **

image.png

webStorage的优势：
相比cookie存储容量增加
可以将请求的表单数据存于本地，减少http请求，节约带宽
webStorage拥有易用的API
webStorage的局限性：
不同浏览器webStorage 和LocalStorage的大小不统一。
在浏览器的隐私模式下面是不可读取的
本质上是对字符串的读取，因此存储内容过多时页面会变卡
不能被爬虫抓取到

WebStorage是什么？

本文链接：https://www.jianshu.com/p/26e1e9fa7089

WebStorage

使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速，这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上。它也可以存储大量的数据，而不影响网站的性能。数据以键/值对存在, web网页的数据只允许该网页访问使用。

Web Storage的目的是为了克服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器。Web Storage的两个主要目标是：

提供一种在cookie之外存储会话数据的途径。
提供一种存储大量可以跨会话存在的数据的机制。

Web Storage又分为两种： sessionStorage 和localStorage ，即这两个是Storage的一个实例。从字面意思就可以很清楚的看出来，sessionStorage将数据保存在session中，浏览器关闭也就没了；而localStorage则一直将数据保存在客户端本地。其API提供的方法有以下几种：

    - setItem (key, value) ——  保存数据，以键值对的方式储存信息。

    - getItem (key) ——  获取数据，将键值传入，即可获取到对应的value值。

    - removeItem (key) ——  删除单个数据，根据键值移除对应的信息。

    - clear () ——  删除所有的数据

    - key (index) —— 获取某个索引的key

localStorage

localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性，可以查看其有多少条记录的数据。使用方法如下：

     var storage = null;
         if(window.localStorage){              //判断浏览器是否支持localStorage
            storage = window.localStorage;     
            storage.setItem("name", "Rick");    //调用setItem方法，存储数据
            alert(storage.getItem("name"));     //调用getItem方法，弹框显示 name 为 Rick
            storage.removeItem("name");     //调用removeItem方法，移除数据
            alert(storage.getItem("name"));   //调用getItem方法，弹框显示 name 为 null
 
         }

localStorage 相对sessionStorage简单一点，需要注意的地方不是很多。

sessionStorage

sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。sessionStorage也有length属性，其基本的判断和使用方法和localStorage的使用是一致的。需要注意的有以下几点：

页面刷新不会消除数据;
只有在当前页面打开的链接，才可以访sessionStorage的数据；
使用window.open打开页面和改变localtion.href方式都可以获取到sessionStorage内部的数据;

网页设置cookie：

jQuery.cookie.js插件

//第一种类型：会话cookie
// //1、设置值
// $.cookie("phone","13188886666");
// $.cookie("email","[email protected]");
// //2、获取值
// var phone=$.cookie("phone");
// console.log(phone);
// var email=$.cookie("email");
// console.log(email);
//第二种类型：设置长期cookie(具有指定有效期)
// $.cookie("address","广东深圳市",{
// expires:7 //expires不仅仅可以是日期类型的对象，也可以是以天为单位的数字
// });
// $.cookie("tel","0755-88888888",{
// expires:1/24 //该cookie值就会保存一小时
// });
// $.cookie("birthday","1.1",{
// expires:new Date("2018-01-01 08:00") //对于这样的过期时间，已经在内部处理好了时区问题
// });
//删除指定的cookie
$.removeCookie("birthday");
原文链接：https://blog.csdn.net/m0_37452696/article/details/78310238

项目中用到的cookie：

设置$.cookie: $.cookie('singlePage','1');

获取cookie：var valueB = $.cookie('singlePage');

清除cookie：$.cookie('singlePage', '', {expires: 0, path: location.pathname});

跨页面传值的几种简单方式

方法一：

通过URL传值

eg:

location.href="跨页面1-2.html?age=18&gender=man";
在下个页面接收:
//1、location.search获取get请求的参数获取到的数据，是以?开头的
var search=location.search;
//2、如果还想要获取确定的数据，可以解析字符串
function parse(search){
//从第二个字符开始截取，获取到第二个开始后面所有的字符
var str=search.substring(1);
var result={};
//分割字符串 -->产生字符串数组
var strs=str.split("&");
//遍历数组中的每一个元素
strs.forEach(function(v){
//伪代码：v="age=18"
var keyvalue=v.split("=");
var name=keyvalue[0];
var value=keyvalue[1];
result[name]=value;
})
return result;
}

var r=parse(search);
方法二：

使用h5的localStorage，或者sessionStorage存储对象类型
存储对象的正确的方式：
var p2={name:"周瑜",age:16};
var s2=JSON.stringify(p2); //将对象"序列化"为JSON数据(字符串格式)
localStorage.setItem("p2",s2); //以字符串格式存储信息
var s2_2=localStorage.getItem("p2"); //获取存储的信息，也是字符串格式
var p2_2=JSON.parse(s2_2); //将JSON数据反序列化为对象

localStroage和sessionStorage使用大致相同，他们的不同之处在于，localstroage是永久保存，而sessionstroage是会话存在，

当会话结束，sessionstroage保存值也会清空。

方法三：

使用cookie保存：

原生cookie
//1、保存一条数据
document.cookie="name=abc";
document.cookie="age=18";
//2、获取所有数据
var cookie=document.cookie;
console.log(cookie); //"name=abc; age=18; PHPSESSID=fr1njdv6apf3neoj5nehntrps7"
//之后可以解析字符串，获取指定的数据内容
//3、设置cookie的有效期
document.cookie="id=666;expires="+new Date("2017-10-22 08:00");

7、如何还原设计稿

前端入门篇（一）：如何把设计稿还原成真实网页

0.0962016.03.27 22:20:24字数 1641阅读 11171

如果你对网页设计及开发感兴趣，但是对标题里出现的第一个名词就摸不着头脑，先不要方。本文对小白友好，零基础可读，保证你读完能了解网页开发的基本思路和流程，明白网页设计稿是怎样被开发实现的。

一、什么是前端

首先，所谓的前端是指什么呢？前端（front-end）是相对后端（back-end）而言的，是描述进程开始和结束的通用词汇。在计算机程序中，前端作用于采集输入信息，后端进行处理。

而我们通常所说的「前端」，一般是指web前端，可以理解为网页的界面样式和视觉呈现。所以，前端设计一般视作网站的视觉设计，前端开发则是视觉设计的代码实现。

二、前端开发语言

HTML、CSS和JavaScript是前端开发中三种最基础的代码语言。看到代码你先别急着关网页，先来欣赏下使用不同程序语言的程序员之间的鄙视链（笑）。

汇编 >C >C++ >Python >Java 及 C# 及 PHP（这三者相互撕） >VB >那些坚持把HTML称为程序语言的人

所以你大概明白了，对于完全零基础的人来说，前端开发所用的语言（除了JavaScript），是相对比较容易学习和上手的。

2.1HTML/CSS/JavaScipt

你可以把网页想象成一间房子。HTML决定了网页的框架结构——有几间房间、作什么用途、里面摆放什么东西，CSS决定了网页的样式——房间是如何装潢的（如墙壁是什么颜色的），JavaScript则决定了网页上的用户交互和数据处理——用遥控器遥控电视。

下面简单介绍一下HTML和CSS语言的用处和用法，如果想继续学习，可以参考翁恺老师的两门公开课程——HTML5入门和CSS3。

2.2HTML

HTML是一种网页标记语言。它主要是利用标签来告诉浏览器，标签之间的东西是什么——是标题、段落、图片还是链接等。浏览器则会根据HTML标签，相应地作出显示。下面举几个栗子：

这是1级标题
这是段落
这是链接的文字

2.3CSS

CSS中文名叫做「层叠样式表」，从名字里就可以看出，它是一种声明样式的文档。我们可以通过链接外部css文档，或者将样式写在HTML文档的标签中，抑或在HTML标签中内嵌属性style=""来实现对样式的定义。举个例子，我们要让

这个段落

的背景变成灰色，就可以用以下三种方法实现：

/*方法一：直接用style属性*/
这是段落

/*方法二：在HTML文档的标签中声明（会应用于页面中所有的段落）*/

  


/*方法三：通过外链实现*/
//另建一个css文档，在其中写上方法二中