界面开发记录

 

目录

 

前端保存session的方法。

1.基本介绍

2. window.sessionStorage

3.window.localStorage

Json的使用方法

1.json对象操作

2.json遍历

---

前端保存session的方法。

1.基本介绍

1. sessionStorage约5M,localStorage约20M;
2. 只能存储字符串,可以将对象 JSON.stringify() 编码后存储;

2. window.sessionStorage

1. 生命周期为关闭浏览器窗口;
2. 在同一个窗口(页面)下数据可以共享;
3. 以键值对的形式存储使用;

//1.存储数据
sessionStorage.setItem(key,value);
//2.获取数据
sessionStorage.getItem(key);
//3.删除数据
sessionStorage.reomveItem(key);
//4.清空数据
sessionStorage.clear();

3.window.localStorage

1. 声明周期永久有效,除非手动删除,否则关闭页面也会存在;
2. 可以多窗口(页面)共享(同一浏览器可以共享);
3. 以键值对的形式存储使用;

//1.存储数据
localStorage.setItem(key,value);
//2.获取数据
localStorage.getItem(key);
//3.删除数据
localStorage.removeItem(key);
//4.清空数据
localStorage.clear();

操作Json的方法

1.json对象操作

1. json字符串转json对象：jQuery.parseJSON(jsonStr);
2. json对象转json字符串：JSON.stringify(jsonObj)
3. 使用jquery中的$.parseJSON(),但是它对json数据格式的要求较高，必须要双引号包围起来（注意是双引号）。

   //注意：json的格式严格按照规范，json字符串：内部用双引号，最外层用单引号。json对象：最外层无引号
   $(function(){
       var jsonInstant = {
   	"name" : "xiaoming",
   	"age" : "15",
   	"weight" : "50kg"
       };
       sessionStorage.setItem("jsonInstant", JSON.stringify(jsonInstant));
   })
   		
   		
   $('#getVal').on('click', function(){ 
   	let jsonInstant = JSON.parse(window.sessionStorage.getItem('jsonInstant'));
           let json = eval(jsonInstant);  //序列json，可根据name取值
   	console.log(json.name);
   	console.log(json.age);
   	console.log(json.weight);	
           window.sessionStorage.removeItem('jsonInstant');    //清空制定name的session
   });

    

2.json数组遍历

1. jQuery中$.each()方法的使用 ：$.each()是对数组，json和dom结构等的遍历。

//遍历一维数组
var arr1=['aa','bb','cc','dd'];
$.each(arr1,function(i,val){  //两个参数，第一个参数表示遍历的数组的下标，第二个参数表示下标对应的值
    console.log(i + '```````' + val);
}

//输出的结果为：
0```````aa
1```````bb
2```````cc
3```````dd


//遍历二维数组
var arr2=[['aaa','bbb'],['ccc','ddd'],['eee','fff']];
$.each(arr2,function(i,item){ //两个参数，第一个参数表示下标，第二个参数表示一维数组中的每一个数组
console.log(i+'````'+item);

//输出的结果为：
0````aaa,bbb
1````ccc,ddd
2````eee,fff


//ES6中foreach箭头函数遍历json数组
$('#getArrVal').on('click', function(){
	let map = new Map();
	let arr = [['aaa','bbb'],['ccc','ddd'],['eee','fff']];
        //item-元素  index-下标 origin-完整数组
	arr.forEach((item,index,origin) => {
	    map.set(item[0], item[1])
	});
	console.log(map.get('aaa'));
});


//复杂多为数组遍历方法，多层循环遍历即可
$('#getComplexArrVal').on('click', function(){
    //基础遍历方法
    var json = {"forum":[{"id":"1","created":"2010-03-19","updated":"2010-03-19","user_id":"1","vanity":"gamers","displayname":"gamers","private":"0","description":"All things gaming","count_followers":"62","count_members":"0","count_messages":"5","count_badges":"0","top_badges":"","category_id":"5","logo":"gamers.jpeg","theme_id":"1"}]};
    var forum = json.forum;
    for (var i = 0; i < forum.length; i++) {
	var object = forum[i];
	for (property in object) {
	    var value = object[property];
            console.log(property + "=" + value); // This alerts "id=1", "created=2010-03-19", etc..
	}
    }

    //es6遍历方法
    $.each(json.forum, function(i, object) {
        $.each(object, function(property, value) {
            console.log(property + "=" + value);
        });
    });
});