- webpack 合并压缩_webpack4.0各个击破(4)—— Javascript & splitChunk
weixin_39600837
webpack合并压缩
webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高。本系列是笔者自己的学习记录,比较基础,希望通过问题+解决方式的模式,以前端构建中遇到的具体需求为出发点,学习webpack工具中相应的处理办法。(本篇中的参数配置及使用方式均基于webpack4.0版本)本篇摘要:本篇主要介绍基于webpack4.0的splitChunks分包技术。[TOC]一.Js模块化开发ja
- 四、webpack4.0 - tapable
Razas
WEBPACK4webpack4.0
一、tapable介绍webpack中插件的时候,需要用到tapable。新建一个项目WEBPACK-Tapable。初始化package.json:npminit-y安装:npminstalltapable--savetapable是一个包。二、tapable三、AsyncParralleHook四、AsyncSeriesHook五、AsyncSeriesWaterfall
- 【01】webpack4.0教程_基础_1
Peter_Tingle
学习webpack4.0的笔记,循序渐进,后续会再做系统总结[toc]webpack安装总结安装本地的webpackwebpackwebpack-cli-D加一个-D表示开发依赖上线的时候不需要这两个包流程:初始化项目生成package.json记录依赖yarninit-y或者npminit-y安装webpack和webpack-cli(webpack4.0需要安装webpack和webpack-
- 关于webpack4.0及以上版本差别
等不到戈多了
关于webpack版本如果没有限定版本,4.0以上会有些许差别,请注意:1,npminfowebpack2,webpack-v查看版本号如果没有出现,npminstall--globalwebpack-cli,因为注意:webpack4x以上,webpack将命令相关的内容都放到了webpack-cli,所以还需要安装webpack-cli;之后再webpack-v例如:webpack5.50.0
- Webpack4.0配置过程以及调试
忧忧自恼
1.前提确保本地环境支持node.js。2.配置https://webpack.js.org/guides/getting-started/https://segmentfault.com/a/1190000006178770
- webpack打包html修改变量,webpack4.0打包优化策略(二)
weixin_39817391
打包优化策略区分开发和生产环境通常我们在开发网页时需要区分构建环境开发环境(development)开发过程中方便开发调试的环境生产环境(production)发布到线上使用的运行环境通过npm命令区分通过cross-env模块设置环境变量cross-env跨平台地设置及使用环境变量,而不必担心为平台正确设置或使用环境变量。npmicross-env-D复制代码Usagenpmscripts中:{
- webpack4.0安装教程与基本命令
暖男Gatsby
1首先确认nodejs的版本号在8.9.4以上,不然无法支持webpack4.0。根目录下输入cmd命令npmiwebpack-cli-g(安装全局的webpack)。2单个文件的打包压缩:安装成功后,在src文件夹中写入入口文件index.js及其依赖js文件,这时执行webpack--modedevelopment命令之后将会默认src下面的index.js文件为入口文件,并在dist文件夹下
- webpack看这一篇就够了,webpack4.0配置详解。
老王brave
webpack看这一篇就够了,webpack4.0配置详解。什么是webpack,webpack给我们解决了哪些实际问题?什么是webpack?webpack它是基于Node.js开发出来的是前端的一个项目构建工具。webpack给我们解决了哪些实际的问题?你是否和我一样整天被这种包与包之间的依赖关系搞得头皮发麻。比如你需要用到easyUI那么你就得引入jQuery,并且jQuery必须在easy
- mini-css-extract-plugin插件快速入门
mn_front
webpack
前言webpack4.0以前,我们通过extract-text-webpack-plugin插件,把css样式从js文件中提取到单独的css文件中。extract-text-webpack-plugin插件的优缺点:更多介绍请看移步:webpack.docschina.org/plugins/ext…webpack4.0以后,官方推荐使用mini-css-extract-plugin插件来打包cs
- 前端每周清单第 52 期: Webpack 4.0,GraphQL 安全加固,去中心化的 Web
weixin_34228387
前端webpack区块链ViewUI
前端每周清单第52期:Webpack4.0,GraphQL安全加固,去中心化的Web作者:王下邀月熊编辑:徐川前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号(ID:frontshow),及时获取前端每周清单。新闻热点国内国外,前端最新动态Webpack4.0.0发
- 2018-12-13 ,使用webpack基础
ChaliceLee92
1.全局安装webpack,终端执行命令:npmiwebpackwebpack-cli-g创建文件夹,新建一个entry.js入口文件,书写内容运行命令webpackentry.js-obundle.js--mode=development这句命令就是打包这个entry.js文件,会生成一个bundle.js文件,webpack4.0需要--mode--mode后面的命令是开发环境或者生成环境pr
- 前端必备知识
海伦•
1.JQuery,网络,CSS3,H5,2.ES6,webpack4.0,git,小程序设计模式,3.VUE,VUEX,VUE源码,React,Node.js,MongoDB数据库等等
- webpack4.0 进阶
alipy_258
上一篇,总结了webpack4.0基础,其中包括:核心的entry、output、mode、loaders、plugins;解析图片、字体;解析Css、Less、Sass文件指纹策略:hash、contenthash、chunkhash代码压缩接下来,我总了一些进阶方案,记录分享下~px自动转remW3C对rem的定义:font-sizeoftherootelementrem对px的对比:rem是
- webpack4.0入门实践
seepDown
npminit-y创建package.json文件npminstall-Dwebpackwebpack-cli命令行打包:node_modules/.bin/webpack需要打包的文件地址--output目标文件地址eq:node_modules/.bin/webpackindex.js--outputdist/bundle.js文件配置:eq:一个手动创建的.js文件依赖jquery.js进行
- webpack4.0使用时提示npm install webpack-cli -D的问题
Jerry379
最近在看关于vue的书,在使用webpack构建项目时,遇到如下问题:>
[email protected]/Users/********/WebstormProjects/webstormProject>webpack-dev-server--open--configwebpack.config.jsTheCLImovedintoaseparatepackage:webpack-cl
- Vue2/3 config里配置publicPath/base之后proxy的配置修改
GIS小虫
vue.js前端javascript
记录一下module.exports={publicPath:'/myProject',devServer:{disableHostCheck:true,//webpack4.0开启热更新proxy:{'/localApi':{target:'http://ip:port/api/',changeOrigin:true,pathRewrite:{'/myProject/localApi':''},
- webpack编译优化
roger1253
升级webpack版本至4.x使用happypack进行多线程编译webpack4.0发布后happypack已经不维护,使用webpack自带的thread-loader可以达到同样效果配置DllPlugin,减少稳定依赖包的编译时间配置BundleAnalyzerPlugin,分析打包体积,将体积较大的依赖包换成cdn载入的方式代码分块,组件按需加载
- webpack4.0 基础
alipy_258
前端构建工具对比作用:把源代码转换成发布到线上的可执行JSCSSHTML代码;代码转换、文件优化、代码分割、模块合并、自动刷新、自动发布、代码校验对比:Grunt、Gulp:集成度不高,没法开箱即用Fis3:官方团队不再维护;也不支持最新的nodeRollup:生态链、功能都不够完善;不支持CodeSplitingWebpack:采用模块化开发的项目;社区活跃、配置灵活、插件化扩展、官方更新迭代快
- webpack 打包出错相关问题(WARNING in Configuration)
thekings
前言:有许多人webpack安装成功,webpack出现打包失败的问题。一、问题一:4.0以上版本的webpack的问题webpack4.0以上版本的webpack的脚手架webpack-cli已经被被分离出来了,需要另外安装。安装命令:npminstallwebpack--gnpminstallwebpack-cli--g安装成功后如果像上篇文章中那样输入打包命令:webpacka.jspack
- webpack 4.0 完全讲解及源码解读(1)
公羊无衣
webpack4.0完全讲解及源码解读就目前前端环境而言,使用cli自动构建工具可以快速的构建项目完成项目搭建,快速完成功能,业务开发,这样水到渠成的模式深得人心,也深得科技公司信赖,因为简单,易用且方便,但是对于使用webpack构建一个0-1的项目,可能很多人只能摊手,不得不说webpack是前端工程化之中占有相当重要地位的成员,本篇文章就来说一下webpack的使用教你从0到1构建一个企业级
- 4. webpack4.0 热跟新`webpack-dev-server`的使用
小白菜的白菜
devserver简介--webpack-dev-server解决的问题-提供http服务-监听文件变化、实时刷新-支持SourceMap方便调试上代码1.安装webpack-dev-servernpmi-Dwebpack-dev-server运行webpack-dev-server命令node_modules/.bin/webpack-dev-server网上给的webpack-dev-serv
- webpack4.0 优化
alipy_258
上一篇,总结了webpack4.0进阶,其中包括:px自动转remTreeShaking的使用和原理分析ScopeHositing使用和原理分析优化构建命令行的显示日志这篇,我们从两速度和体积来分析代码,进行优化。速度分析插件:speed-measure-webpack-plugin作用:分析整个打包总耗时每个loader和插件的耗时情况代码如下:image.png体积分析插件:webpack-b
- 第1讲 使用vue-cli3.0创建项目
喔喔牛在路上
vue-cli3.0是基于webpack4.0之上构建的vue脚手架工具,得益于webpack4.0的零配置特性,使得在使用vue-cli3.0时,零配置就可以开发和打包vue项目vue-cli3.0及更高版本为了区别vue-cli1.0和vue-cli2.0,名字更改成了@vue/cli,如果你的电脑已经安装了比如vue-cli2.0,需要卸载它,然后安装@vue/cli,不用担心安装了更高版本
- webpack 5 background-image 图片引入问题
躺希腊额阿毛
最初的时候因为没仔细阅读文档,所以沿用的4.0的写法。然后发现scss里的background能引入不报错,但是展示不出来,但是tsx文件能正常引入。最初以为是scss的问题,尝试了resolve-url-loader,并没用,后来老大查文档才发现重点,在此记录下。image.png'javascript/auto'有尝试过,并没有成功,也不知道是不是写法问题webpack4.0的写法rules:
- 从基础到实战 手把手带你掌握新版Webpack4.0(学习笔记)
li_shifeng
01webpack初探-导学传统编程的弊端以前使用面向对象编程,页面需要引入多个js,造成多个请求,影响加载,需要注意引用的顺序,使用时无法直接从js里看出文件的层级关系,一旦出错调试很麻烦///index.html///header.jsfunctionHeader(){varroot=document.getElementById('root')varheader=document.creat
- webpack实例教程(四)webpack4.0出来了
youfrweb
webpack实例教程(一)安装和查看webpack实例教程(二)hotUglifywebpack实例教程(三)loaderwebpack实例教程(四)webpack4.0出来了这次还准备按照以前的方法使用webpack,but各种报错,都是原来你没见过的,还好提示的很明显,webpack-cli从webpack包里面分离出来了,所以需要自己安装啦!具体报错是这样的:$npxwebpacksrc/
- webpack4.0 基础准备
Echonessy
webpack官方文档地址链接,本文主要介绍开始webpack前的准备工作。前言为什么要引入webpack 随着前端工程越来越复杂,单独创建htmljscss的方式已经无法保证项目的可维护性,所以我们就需要考虑把不同的业务逻辑拆分成模块,然后分开引入这些模块,每个模块做自己的事情,这样就可以保证项目的可维护性和可扩展性了。假如我们一个复杂的工程需要几千个js文件,我们不可能引入几千个js文件,所
- webpack4.0从零到一搭建vue项目框架 vue + vue-router + vuex + hot + 换肤 + moke...
夜雨渐停丶我独行
主要内容一.初始化工程项目二.添加热部署三.添加vue套餐四.添加换肤功能五.添加项目端口提示六.添加axios并二次封装七.添加moke.js模拟后端数据八.设置环境变量一.初始化工程项目生成基础项目npminit-y创建src、dist目录,src/main.js、index.html、webpack.config.js文件目录如下project├──dist├──src│└──main.js
- webpack4.0 入门篇 - 构建前端开发的基本环境
不吃早餐a
image什么是webpackwebpack可以看做是模块打包机:他做的事情是,分析你的项目结构,找到JavaScript模块以及其他的一些浏览器不能直接运行的扩展语言(Scss、TypeScript等),将其打包为合适的格式以供浏览器使用构建就是把源代码转换成发布到线上可执行的JavaScript、CSS、HTML代码,包括以下内容:代码转换:TypeScript编译成JavaScript、SC
- webpack、grunt、gulp
jie_zhao
webpack-概念:是一个现代js应用程序的静态模块打包器。webpack4和3的区别如下:1、从webpack4.0开始,可以不用引入一个配置文件。(当然你也可以配置一些东西)2、不仅要安装webpack,还要安装webpack-cli3、增加mode配置(development|production)。对不同的环境启用不同的配置4、去掉了CommonsChunkPlugin(改成optimi
- LeetCode[Math] - #66 Plus One
Cwind
javaLeetCode题解AlgorithmMath
原题链接:#66 Plus One
要求:
给定一个用数字数组表示的非负整数,如num1 = {1, 2, 3, 9}, num2 = {9, 9}等,给这个数加上1。
注意:
1. 数字的较高位存在数组的头上,即num1表示数字1239
2. 每一位(数组中的每个元素)的取值范围为0~9
难度:简单
分析:
题目比较简单,只须从数组
- JQuery中$.ajax()方法参数详解
AILIKES
JavaScriptjsonpjqueryAjaxjson
url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。
type: 要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持。
timeout: 要求为Number类型的参数,设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局
- JConsole & JVisualVM远程监视Webphere服务器JVM
Kai_Ge
JVisualVMJConsoleWebphere
JConsole是JDK里自带的一个工具,可以监测Java程序运行时所有对象的申请、释放等动作,将内存管理的所有信息进行统计、分析、可视化。我们可以根据这些信息判断程序是否有内存泄漏问题。
使用JConsole工具来分析WAS的JVM问题,需要进行相关的配置。
首先我们看WAS服务器端的配置.
1、登录was控制台https://10.4.119.18
- 自定义annotation
120153216
annotation
Java annotation 自定义注释@interface的用法 一、什么是注释
说起注释,得先提一提什么是元数据(metadata)。所谓元数据就是数据的数据。也就是说,元数据是描述数据的。就象数据表中的字段一样,每个字段描述了这个字段下的数据的含义。而J2SE5.0中提供的注释就是java源代码的元数据,也就是说注释是描述java源
- CentOS 5/6.X 使用 EPEL YUM源
2002wmj
centos
CentOS 6.X 安装使用EPEL YUM源1. 查看操作系统版本[root@node1 ~]# uname -a Linux node1.test.com 2.6.32-358.el6.x86_64 #1 SMP Fri Feb 22 00:31:26 UTC 2013 x86_64 x86_64 x86_64 GNU/Linux [root@node1 ~]#
- 在SQLSERVER中查找缺失和无用的索引SQL
357029540
SQL Server
--缺失的索引
SELECT avg_total_user_cost * avg_user_impact * ( user_scans + user_seeks ) AS PossibleImprovement ,
last_user_seek ,
 
- Spring3 MVC 笔记(二) —json+rest优化
7454103
Spring3 MVC
接上次的 spring mvc 注解的一些详细信息!
其实也是一些个人的学习笔记 呵呵!
- 替换“\”的时候报错Unexpected internal error near index 1 \ ^
adminjun
java“\替换”
发现还是有些东西没有刻子脑子里,,过段时间就没什么概念了,所以贴出来...以免再忘...
在拆分字符串时遇到通过 \ 来拆分,可是用所以想通过转义 \\ 来拆分的时候会报异常
public class Main {
/*
- POJ 1035 Spell checker(哈希表)
aijuans
暴力求解--哈希表
/*
题意:输入字典,然后输入单词,判断字典中是否出现过该单词,或者是否进行删除、添加、替换操作,如果是,则输出对应的字典中的单词
要求按照输入时候的排名输出
题解:建立两个哈希表。一个存储字典和输入字典中单词的排名,一个进行最后输出的判重
*/
#include <iostream>
//#define
using namespace std;
const int HASH =
- 通过原型实现javascript Array的去重、最大值和最小值
ayaoxinchao
JavaScriptarrayprototype
用原型函数(prototype)可以定义一些很方便的自定义函数,实现各种自定义功能。本次主要是实现了Array的去重、获取最大值和最小值。
实现代码如下:
<script type="text/javascript">
Array.prototype.unique = function() {
var a = {};
var le
- UIWebView实现https双向认证请求
bewithme
UIWebViewhttpsObjective-C
什么是HTTPS双向认证我已在先前的博文 ASIHTTPRequest实现https双向认证请求
中有讲述,不理解的读者可以先复习一下。本文是用UIWebView来实现对需要客户端证书验证的服务请求,网上有些文章中有涉及到此内容,但都只言片语,没有讲完全,更没有完整的代码,让人困扰不已。但是此知
- NoSQL数据库之Redis数据库管理(Redis高级应用之事务处理、持久化操作、pub_sub、虚拟内存)
bijian1013
redis数据库NoSQL
3.事务处理
Redis对事务的支持目前不比较简单。Redis只能保证一个client发起的事务中的命令可以连续的执行,而中间不会插入其他client的命令。当一个client在一个连接中发出multi命令时,这个连接会进入一个事务上下文,该连接后续的命令不会立即执行,而是先放到一个队列中,当执行exec命令时,redis会顺序的执行队列中
- 各数据库分页sql备忘
bingyingao
oraclesql分页
ORACLE
下面这个效率很低
SELECT * FROM ( SELECT A.*, ROWNUM RN FROM (SELECT * FROM IPAY_RCD_FS_RETURN order by id desc) A ) WHERE RN <20;
下面这个效率很高
SELECT A.*, ROWNUM RN FROM (SELECT * FROM IPAY_RCD_
- 【Scala七】Scala核心一:函数
bit1129
scala
1. 如果函数体只有一行代码,则可以不用写{},比如
def print(x: Int) = println(x)
一行上的多条语句用分号隔开,则只有第一句属于方法体,例如
def printWithValue(x: Int) : String= println(x); "ABC"
上面的代码报错,因为,printWithValue的方法
- 了解GHC的factorial编译过程
bookjovi
haskell
GHC相对其他主流语言的编译器或解释器还是比较复杂的,一部分原因是haskell本身的设计就不易于实现compiler,如lazy特性,static typed,类型推导等。
关于GHC的内部实现有篇文章说的挺好,这里,文中在RTS一节中详细说了haskell的concurrent实现,里面提到了green thread,如果熟悉Go语言的话就会发现,ghc的concurrent实现和Go有点类
- Java-Collections Framework学习与总结-LinkedHashMap
BrokenDreams
LinkedHashMap
前面总结了java.util.HashMap,了解了其内部由散列表实现,每个桶内是一个单向链表。那有没有双向链表的实现呢?双向链表的实现会具备什么特性呢?来看一下HashMap的一个子类——java.util.LinkedHashMap。
- 读《研磨设计模式》-代码笔记-抽象工厂模式-Abstract Factory
bylijinnan
abstract
声明: 本文只为方便我个人查阅和理解,详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/
package design.pattern;
/*
* Abstract Factory Pattern
* 抽象工厂模式的目的是:
* 通过在抽象工厂里面定义一组产品接口,方便地切换“产品簇”
* 这些接口是相关或者相依赖的
- 压暗面部高光
cherishLC
PS
方法一、压暗高光&重新着色
当皮肤很油又使用闪光灯时,很容易在面部形成高光区域。
下面讲一下我今天处理高光区域的心得:
皮肤可以分为纹理和色彩两个属性。其中纹理主要由亮度通道(Lab模式的L通道)决定,色彩则由a、b通道确定。
处理思路为在保持高光区域纹理的情况下,对高光区域着色。具体步骤为:降低高光区域的整体的亮度,再进行着色。
如果想简化步骤,可以只进行着色(参看下面的步骤1
- Java VisualVM监控远程JVM
crabdave
visualvm
Java VisualVM监控远程JVM
JDK1.6开始自带的VisualVM就是不错的监控工具.
这个工具就在JAVA_HOME\bin\目录下的jvisualvm.exe, 双击这个文件就能看到界面
通过JMX连接远程机器, 需要经过下面的配置:
1. 修改远程机器JDK配置文件 (我这里远程机器是linux).
 
- Saiku去掉登录模块
daizj
saiku登录olapBI
1、修改applicationContext-saiku-webapp.xml
<security:intercept-url pattern="/rest/**" access="IS_AUTHENTICATED_ANONYMOUSLY" />
<security:intercept-url pattern=&qu
- 浅析 Flex中的Focus
dsjt
htmlFlexFlash
关键字:focus、 setFocus、 IFocusManager、KeyboardEvent
焦点、设置焦点、获得焦点、键盘事件
一、无焦点的困扰——组件监听不到键盘事件
原因:只有获得焦点的组件(确切说是InteractiveObject)才能监听到键盘事件的目标阶段;键盘事件(flash.events.KeyboardEvent)参与冒泡阶段,所以焦点组件的父项(以及它爸
- Yii全局函数使用
dcj3sjt126com
yii
由于YII致力于完美的整合第三方库,它并没有定义任何全局函数。yii中的每一个应用都需要全类别和对象范围。例如,Yii::app()->user;Yii::app()->params['name'];等等。我们可以自行设定全局函数,使得代码看起来更加简洁易用。(原文地址)
我们可以保存在globals.php在protected目录下。然后,在入口脚本index.php的,我们包括在
- 设计模式之单例模式二(解决无序写入的问题)
come_for_dream
单例模式volatile乱序执行双重检验锁
在上篇文章中我们使用了双重检验锁的方式避免懒汉式单例模式下由于多线程造成的实例被多次创建的问题,但是因为由于JVM为了使得处理器内部的运算单元能充分利用,处理器可能会对输入代码进行乱序执行(Out Of Order Execute)优化,处理器会在计算之后将乱序执行的结果进行重组,保证该
- 程序员从初级到高级的蜕变
gcq511120594
框架工作PHPandroidhtml5
软件开发是一个奇怪的行业,市场远远供不应求。这是一个已经存在多年的问题,而且随着时间的流逝,愈演愈烈。
我们严重缺乏能够满足需求的人才。这个行业相当年轻。大多数软件项目是失败的。几乎所有的项目都会超出预算。我们解决问题的最佳指导方针可以归结为——“用一些通用方法去解决问题,当然这些方法常常不管用,于是,唯一能做的就是不断地尝试,逐个看看是否奏效”。
现在我们把淫浸代码时间超过3年的开发人员称为
- Reverse Linked List
hcx2013
list
Reverse a singly linked list.
/**
* Definition for singly-linked list.
* public class ListNode {
* int val;
* ListNode next;
* ListNode(int x) { val = x; }
* }
*/
p
- Spring4.1新特性——数据库集成测试
jinnianshilongnian
spring 4.1
目录
Spring4.1新特性——综述
Spring4.1新特性——Spring核心部分及其他
Spring4.1新特性——Spring缓存框架增强
Spring4.1新特性——异步调用和事件机制的异常处理
Spring4.1新特性——数据库集成测试脚本初始化
Spring4.1新特性——Spring MVC增强
Spring4.1新特性——页面自动化测试框架Spring MVC T
- C# Ajax上传图片同时生成微缩图(附Demo)
liyonghui160com
1.Ajax无刷新上传图片,详情请阅我的这篇文章。(jquery + c# ashx)
2.C#位图处理 System.Drawing。
3.最新demo支持IE7,IE8,Fir
- Java list三种遍历方法性能比较
pda158
java
从c/c++语言转向java开发,学习java语言list遍历的三种方法,顺便测试各种遍历方法的性能,测试方法为在ArrayList中插入1千万条记录,然后遍历ArrayList,发现了一个奇怪的现象,测试代码例如以下:
package com.hisense.tiger.list;
import java.util.ArrayList;
import java.util.Iterator;
- 300个涵盖IT各方面的免费资源(上)——商业与市场篇
shoothao
seo商业与市场IT资源免费资源
A.网站模板+logo+服务器主机+发票生成
HTML5 UP:响应式的HTML5和CSS3网站模板。
Bootswatch:免费的Bootstrap主题。
Templated:收集了845个免费的CSS和HTML5网站模板。
Wordpress.org|Wordpress.com:可免费创建你的新网站。
Strikingly:关注领域中免费无限的移动优
- localStorage、sessionStorage
uule
localStorage
W3School 例子
HTML5 提供了两种在客户端存储数据的新方法:
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不