用localStorage保存当前页面的数据和表格页码

localStorage保存当前的数据,当在表格第好几十页点击其中某一项数据查看时,看完在返回又会回到表格第一页和之前在input框里输入的内容也清空了,有很多办法比如JS页面跳转,返回前一页

返回上一页 
重载页面,本地刷新 
返回上一页重载页面,本地刷新 

相当于点击浏览器左上角的后退按钮
还有就是用储存的方法在点击进入下一个页面是保存当前页面的信息,然后在下个页面返回来时再拿出来。
这里用的bootstrap框架
html:

还有表格

//初始化table
				oTableInit.Init = function(_url) {
					$('#table-elect').bootstrapTable({
						url: _url,
						method: 'get',
						cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
						pagination: true, //是否显示分页(*)
						sortable: true, //是否启用排序
						sortOrder: "asc", //排序方式
						queryParams: oTableInit.queryParams, //传递参数(*)
						sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
						pageNumber: 1, //初始化加载第一页,默认第一页
						pageSize: 10, //每页的记录行数(*)
						pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)
						uniqueId: "ID", //每一行的唯一标识,一般为主键列
						cardView: false, //是否显示详细视图
						showRefresh: false, //是否显示刷新按钮
						detailView: false, //是否显示父子表
						search: false,
						columns: [{
							field: 'name',
							title: '姓名',
							align: 'center',
							width: 100,
						}, {
							field: 'sex',
							title: '性别',
							align: 'center',
							width: 100,
						
					//这里----------------------------------------------------------------------------------------------------
							formatter: function(value, row, index) {

								var detail = '',
									edit = '',
									dele = '';

						
								detail = '查看';
								edit = '编辑';
								dele = '删除';

								return detail + edit + dele;
							},
							events: window.formatterEvents = {
								'click .detail': function(e, value, row, index) {
									localStorageData()//点击查看时调用localStorage方法
									id = row.id;
									openPage('view_managementCenter/view_personalInfo_manage_detail?id=' + id);
								},
							
							
							}
						}],
						responseHandler: function(data) {

							if (data.code == '200') {
								return data.data;
							} else {
								return data;
							}

						}
					})
				}

localStorage的方法::::

	//缓存数据和页码
				function localStorageData(){
				       //拿到Input框里的值存起来
					   var tableOne = $('#search-input').val()
								if(tableOne) {
									localStorage.setItem("inputContent",tableOne)
								}else {
									localStorage.setItem("inputContent", '');
								}
						//拿到当前表格的页码存起来
						var curAgentTablePageNumber = $("#table-elect").bootstrapTable("getOptions").pageNumber;
							if (curAgentTablePageNumber) {
								localStorage.setItem("table-page",curAgentTablePageNumber)
							}		
				}

然后当再次回到这个页面刷新页面时使用

//使用缓存的数据
			$(document).ready(function(){
				var inputTwo = localStorage.getItem("inputContent")
				var talbePage = localStorage.getItem('table-page')
				$('#search-input').val(inputTwo);
				$('#table-elect').bootstrapTable('refreshOptions',{pageNumber:Number(talbePage)});
			})

OK boy next door~~~~~

你可能感兴趣的:(JS,localStorage,bootstrap,bootstrap,js,缓存,javascript,jquery)