本篇文章打算自己遇到一个问题积累一个,所以…..慢慢来,慢慢积累,总会好的
sessionStorage 、localStorage 和 cookie 之间的区别
共同点:都是保存在浏览器端,且同源的。
区别:
cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。
存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。
作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。
Web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。
Web Storage 的 api 接口使用更方便
for… of… 和for …in… 的区别
简单来说,for in是遍历对象属性,即遍历键名,for of是遍历对象元素,即遍历键值。
此外,for in 遍历数组无法保证输出值的顺序,而for of可以保证输出顺序
Object.prototype.objCustom = function () {};
Array.prototype.arrCustom = function () {};
let iterable = [3, 5, 7];
iterable.foo = "hello";
//for in 循环所有
for (let i in iterable) {
console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}
//for of只可以循环可迭代对象的可迭代属性,不可迭代属性在循环中被忽略了
for (let i of iterable) {
console.log(i); // logs 3, 5, 7
}
注意:
- 推荐在循环对象属性的时候使用for…in ; 在遍历数组的时候的时候使用for…of。
- for…in循环出的是key,for…of循环出的是value
- for…of是ES6新引入的特性。修复了ES5引入的for…in的不足
- for…of不能循环普通的对象,需要通过和Object.keys()搭配使用;所以对普通对象的属性遍历推荐使用for…in
二维数组去重
var arr = [
["aa", "bb", "cc"],
["aa", "bb", "cc"],
["b", "b", "v"]
];
var hash = {};
var result = [];
for (var i = 0, len = arr.length; i < len; i++) {
if (!hash[arr[i]]) {
result.push(arr[i]);
hash[arr[i]] = true;
}
}
console.log(result)
var array = [
["aa", "bb", "cc"],
["aa", "bb", "cc"],
["b", "b", "v"]
];
var tempObj = {};
for (var n in array) {
var itemString = array[n].join("");
console.log(itemString)
if (tempObj[itemString]) {
array.splice(n, 1);
}
tempObj[itemString] = true;
}
console.log(array);
解决浏览器显示12px字体问题
.small-font {
font-size: 12px;
-webkit-transform-origin-x: 0;
-webkit-transform: scale(0.90);
}
.smallsize-font {
font-size: 10.8px;
}
<p class="small-font smallsize-font">温馨提示:</p>
<p style="font-size: 12px;">温馨提示:</p>
命名冲突
我们常常在一个js文件中定义一个大的对象,并为其绑定属性方法,其主要目的主要是为了避免命名冲突。
全局变量会帮到window上,不同js文件中如果使用了相同的全局变量,或者定义了相同名字的顶级函数都会造成命名冲突。
减少冲突的办法就是把所有变量和函数都绑定在一个全局变量中。
//1.js
var a = {};
a.name = 'cheny0815';
a.foo = function (){
return 'foo';
}
//2.js
var b ={};
b.name = 'cheny0815';
b.foo = function(a,b){
return a+b;
}
//此时两个文件即使定了相同的name属性和foo函数,但是并不冲突。
变量提升
javascript中函数会先扫描整个函数体的语句,把所有申明的变量提升到函数顶部
function foo(){
var a = "name"+b;
var b = 'cheny0815';
return a;
}
foo() //nameundefined
//相当于
function foo(){
var b;
var a = "name"+b;
b = "cheny0815";
return a;
}
闭包中的this指向window
window.focus() 方法可把键盘焦点给予一个窗口。
前端常遇兼容性问题
获取地址栏参数方法
function GetRequest() {
var url = decodeURI(location.search);
var object = {};
if(url.indexOf("?") != -1)
{
var str = url.substr(1);
var strs = str.split("&");
for(var i = 0; i < strs.length; i ++)
{
object[strs[i].split("=")[0]]=strs[i].split("=")[1]
}
}
return object;
}
前端性能优化方面
给你一个网址,从输入到渲染完成的过程?
先解析域名,在根据域名找对应的ip,根据ip地址找到对应的服务器,请求到服务器上的所需资源,之后渲染页面
display 的值以及作用
/* <display-outside> values */
display: block;
display: inline;
display: run-in;
/* <display-inside> values */
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;
display: subgrid;
/* <display-outside> plus <display-inside> values */
display: block flow;
display: inline table;
display: flex run-in;
/* <display-listitem> values */
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;
/* <display-internal> values */
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;
/* <display-box> values */
display: contents;
display: none;
/* <display-legacy> values */
display: inline-block;
display: inline-table;
display: inline-flex;
display: inline-grid;
/* Global values */
display: inherit;
display: initial;
display: unset;