- php 表格导入excel插件,BootStrap Fileinput插件和表格插件相结合实现导入Excel数据的文件上传、预览、提交的步骤...
weixin_34518801
php表格导入excel插件
这篇文章主要介绍了BootStrapFileinput插件和Bootstraptable表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤,需要的朋友可以参考下bootstrap-fileinput源码:https://github.com/kartik-v/bootstrap-fileinputbootstrap-fileinput在线API:http://plugins.kra
- fastadmin 导出
猿粪已尽
笔记fastadminfastadmin
1:先上效果图2:实现步骤①在对应的js(路径:/public/assets/js/backend/xxx.js)里添加下图代码下面是图中的代码:$(document).on("click",".btn-export",function(){varids=Table.api.selectedids(table);varpage=table.bootstrapTable('getData');var
- Bootstrap table 刷新回调陷入死循环
翔云123456
Javascripthtml人生感悟bootStrapT前端
最近开发前端页面,在使用Bootstraptable自带的刷新按钮时,遇到一个死循环调用问题。Bootstraptable自带刷新按钮,点击后会以上次url为参数触发自带的刷新操作。而现在要求更新url后再去刷新,这样自带的刷新操作无法满足需求。通过查看官方文档,看到可以定义refresh事件回调函数,在回调函数里面再设置新的url,然后显式调用refresh操作,看起来已经完成了需求,然而。。。
- bootstrapTable嵌套input,实现上下左右和tab键切换
wengelovelian
javascript开发语言ecmascript
封装组件js-----keyDown.js$(function(){vartable={size:$("#size").val()};varinputnum=0;//键盘事件document.onkeydown=function(event){//兼容MozillaFirefoxif(null==event){event=window.event;}elseif((event.keyCode=37
- 设置x-editable编辑框的大小
李北北
我的x-editable是结合BootstrapTable一起使用的,如需要将x-editable和BootstrapTable整合,请参考BootstrapTable结合x-editable实现单元格编辑。使用x-editable进行编辑时候,其编辑框太小了,如图image.png于是想办法将其设置大一点,首先想到的是通过css进行修改,于是用浏览器检查了编辑框元素,发现了如下补齐:image.
- react经验10:与jquery配合使用
淘人居士
web前端react.jsjquery前端react
应用场景老web项目进行react改造,为了节省时间,部分jquery组件仍然保留。案例1使用bootstrapTable组件。node_modules准备jquery、bootstrap、bootstrap-table如果需要typescript,则额外追加@types/bootstrap、@types/jquery以上都直接npm安装。实施步骤:1.在src的index中挂载jquery到全局
- BootstrapTable 行内编辑解决方案:x-editable
鄂东男孩
javabootstrap
一、x-editable组件介绍x-editable组件是一个用于创建可编辑弹出框的插件,它支持三种风格的样式:bootstrap、JqueryUI、Jquery。大致效果如下图:根据博主一贯的风格,这里肯定是选用第一种喽。首先还是给出开源地址吧。x-editable开源地址:https://github.com/vitalets/x-editablex-editable文档地址:X-editab
- bootstrap table表格内容居中对齐
祈澈菇凉
官方网站:http://bootstrap-table.wenzhixin.net.cn/参考文档:http://issues.wenzhixin.net.cn/bootstrap-table/index.html中文文档:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/下载bootstrapTable插件所必须的js,地址:
- bootstrap table添加行
xinyuebaihe
bootstrap
1.bootstraptable添加行ttttt/***addanewrow*/functionxx(){alert();$('#subprocessTable').bootstrapTable('selectPage',1);//Jumptothefirstpagevardata={'ii':'','aa':''};//defineanewrowdata,certainlyit'sempty$(
- bootstrap table轻松实现数据表格
guanalex
在使用bootstraptable时可能在很多时候回用的表格来显示数据,如果自己写那肯定没问题,但是数据展示出来就麻烦多了,然而bootstraptable封装了一套完善的数据表格组件,把从后台请求的数据很容易就展示出来了,bootstraptable有两种实现方式,一种是通过table写定在html里面,另一种是通过js实现,js实现比较灵活,所以这里采用js方式,下面来看实现。效果页客户端必须
- bootstrapTable传参示例
FW龙
bootstrap前端htmljavascript
Controller层@ResponseBody@RequestMapping("/allAdm")publicListfindallAdm(){Listlist=admService.findallAdm();//查询数据以返回listreturnlist;}HTML页面Script页面$(function(){$('#table1').bootstrapTable({url:'/allAdm'
- 支持动态添加列,多行Title的bootstrapTable
菜鸟进阶成大神
前端开发
摘要bootstrapTable是目前应用较多的前端Table插件,代码简洁,兼容性好,实用且功能丰富。但目前的bootstrapTable依然无法满足客户近乎变态的要求。客户需求我们先了解一下客户的变态需求三行Title动态合并列动态添加小标题(第三行title显示内容从数据库读取)根据页面显示内容及样式原模原样导出Excel给一张图感受一下:开发过程通过分析,我们需要实现以下几个点合并行合并列
- FastAdmin列表实现自定义搜索及传值
凯鑫BOSS
fastadminchromejavascript前端
在js代码中找到表格初始化table.bootstrapTable找到如下位置{field:'annual',title:__('年度'),operate:'LIKE',searchList:function(columns){returnTemplate('annualtpl',{});},formatter:function(value,row,index){return'无';},visib
- bootstrap插件的基本使用
沐子a~
bootstrap前端javascript
1.更新表格数据(根据行索引:仅更新一个单元格)varrows={index:index,//更新列所在行的索引field:"status",//要更新列的fieldvalue:"正常"//要更新列的数据}$('#table_Id').bootstrapTable("updateCell",rows);2.更新表格数据(根据特定的id:可直接更新一行数据)varNUM=1,row={name:'小
- 实战Flask+BootstrapTable后端传javascript脚本给前端实现多行编辑(ajax方式)
阿桂天山
前端
相信看到此文的朋友们一定会感到庆幸,总之我是用了两天死磕,才得到如下结果,且行且珍惜,祝好各位!话不多说,有图有源码1.看图2.前端实现页面{%from"common/_macro.html"importstatic%}Bootstrap-Table多行编辑保存保存varprefix="/hellotableeditrowssave";var$table=$('#exampleTable');$(
- 表格插件-bootstrap table的使用示例
祈澈菇凉
基于Bootstrap的jQuery表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/1:在官网上下载相关的文件之后,步骤下载之后引入:2:开始写代码$('#mytable').bootstrapTable({columns:[{field:'i
- Bootstrap Table pagelist设置后失效
L·S·P
大前端bootstrapbootstrap-tabletabledropdown.jsjs
BootstrapTablepagelist设置后不生效、失效、不起作用、不能使用问题。前言在使用BootstrapTable进行数据展示时,设置pagelist选项后不生效。bootstrap版本为v3.3.7。经过网上搜索尝试使用以下几种方式解决,发现均不行,你们可以参考解决:查找发现有将smartDisplay选项设置为false后便可以。以及有些人不引入bootstrap.js也会生效,我
- 实战Flask+BootstrapTable最简动态表头及数据(ajax方法)
阿桂天山
flaskajaxpython
话不多说,有图有源码1.实现原理:通过ajax从后端获取表头及数据前端页面内容{%from"common/_macro.html"importstatic%}保存$(function(){var$table=$('#exampleTable');varloadData=[];vartableColumns=[];initTable();ajaxTable('/helloeditrowssave/a
- 实战Flask+BootstrapTable最实用服务端分页查询动态表头及数据(ajax方式)
阿桂天山
flaskajaxpython
看到这篇文章的朋友们是幸运的,我用了很久才实战出如下结果,且行且珍惜,祝好!话不多说,有图有源码1.看图,实现服务端动态表头数据,分页,查询,排序1.数据准备CREATETABLE`goods`(`id`int(11)NOTNULLAUTO_INCREMENT,`name`varchar(255)DEFAULTNULLCOMMENT'商品名',`no`varchar(255)DEFAULTNULL
- 第五部分 增加日期功能 和表格部分
陈情令
上面部分日期功能查找的插件点击更改日期传起始时间和结束时间到接口表格部分也是查找相应的会议号进行查找表格使用的是bootstraptable得到的里面导入表格内容需要将表格部分先销毁再创建$("#reportTable").bootstrapTable('destroy');之后的表格部分注意部分就是点击导出按钮得到的内容是乱码修改jquery.base64.js内部内容jQuery.base64
- bootstrapTable 显示内容过长,鼠标悬停展示全部
张家强 全栈
js
{field:'logisticsreturnapplymassage',valign:'middle',title:'物流返回消息(申请)',align:'center',/**设置内容过长样式变形问题*/cellStyle:function(val,rowData,index){return{css:{"white-space":'nowrap',"text-overflow":'ellips
- 前端bootstrap 序号展示
那些这个夏天
bootstrap前端bootstrap序号展示
{field:'Number',title:'序号',align:'center',width:20,formatter:function(value,row,index){//returnindex+1;varpageSize=$('#parent_table').bootstrapTable('getOptions').pageSize;//通过表的#id可以得到每页多少条varpageNum
- 基于 jQuery 与 Bootstrap 简单封装一个表格分页的组件
ostuthere
JavaScriptbootstrapjQuerybootstrapjqueryjavascript
最近遇到一个需求:页面上的数据可能会有很多条,需要将数据分页展示在表格中。项目用的是jQuery和Bootstrap,本来想直接用bootstrapTable插件,但是需要额外引入js文件、语言包等等,样式、语言翻译啥的都不太好做,索性还是决定参照这个,基于jQuery和Bootstrap,自己实现一个简单版的。因为项目提供的后端接口直接将查询到的所有数据返回,所以这个分页实际上只是个假分页罢了,
- bootstrap表格添加按钮配合模态框的使用
海因斯坦
使用bootstrap的时候,我们经常需要使用到表格,这时候通常又会设及到一些增删改查等功能,通常是以按钮的形式嵌入表格中,因此这里介绍一下如何在表格中添加按钮。同时按钮点击时通常会涉及到模态框,在这里也一并介绍。表格添加按钮$('#table').bootstrapTable({//若干参数columns:[{//列参数field:'sid',title:'sid',},{field:'name
- 功能强大的jQuery图片查看器插件
禅与计算机程序设计艺术
功能强大的jQuery图片查看器插件:viewerimage.pngimage.png$(function(){TaskReport.renderReportTable();$('.sidebar-toggle').click();});letTaskReport={renderReportTable:()=>{$('#task-report-table').bootstrapTable({det
- bootstrap-table表格插件行双击事件触发
初生的太阳丶
js前端技术bootstraphtml
下面是使用了bootstrap-table的一个表格这是双击后弹出的提示框代码如下$(function(){$('#table').bootstrapTable({data:data,//数据源onDblClickCell:function(field,value,row,td){alert(value);}});});下面展示括号中的变量打印出来的日志数据
- bootstraptable表格columns 隐藏方法
y562363753
JavaWeb学习bootstraptablecolumn列隐藏
隐藏:visible:false,显示:visible:true,visible属性没有true或者false,是visible,invisible和gone。visible:可见的;invisible:不可见,但占空间;gone:不可见,也不占空间,控件从布局上消失了。/***定义前端js脚本类*@author*@since*/vartoDo=function(){}/***类方法定义*/toD
- No converter for [class java.util.LinkedHashMap] with preset Content-Type ‘text/html;charset=UTF-8‘]
好锅煮好饭
Javajavahtml开发语言
记录一下debug日常…前端网页做了个bootstrap表格,使用的是服务器分页方式,服务器返回的数据需要满足以下JSON格式规范:{"total":20,//总共满足条件的数据数量,bootstraptable会根据这个值和你设置pageSize,自动计算出页码"rows":[{"Id":1,"ProductName":"香蕉","StockNum":"100"},{"Id":2,"Produc
- Uncaught TypeError: $(...).bootstrapTable is not a function
好锅煮好饭
Java前端
UncaughtTypeError:$(…).bootstrapTableisnotafunction检查发现引用的公共文件包含了jquery文件,而当前文件也引用了另一个版本的jquery文件,删除其中一个,解决。总结:不能重复引用
- layui数据表格(一:基础篇,数据展示、分页组件、表格内嵌表单和图片)
前端老码农
前端layuitable
表格展示神器之一:layui表格前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstraptable、layuitable、easyUItable等....博主个人比较倾向于layui,layui极简,却又不失饱满的内在,体积轻盈,组件丰盈。使用简单引用模块便捷,有丰富的扩展功能。layui官网:https://www.lay
- 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 速度很慢而且效率也不