前端之路：js跨页面传参(H5 web storage)

一、URL（传统）

把参数值附在url后面传递到其他页面,

这种方法不适合在后台 iframe 这种  tab 页面直接跳转传参，iframe 标签写死了。页面虽然刷新了，但是接受的url参数是第一次打开时候的参数。

 

二、H5 web storage

1、sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

2、localStorage HTML5本地存储web storage特性的API之一，用于将大量数据（最大5M）保存在浏览器中

. 保存后数据永远存在不会失效过期，除非手动清除。

. 不参与网络传输。

. 一般用于性能优化，可以保存图片、js、css、html 模板、大量数据。

3、数据以 键/值 （key/value）对存在, web网页的数据只允许该域访问使用

4、不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

保存数据：localStorage.setItem(key,value);

读取数据：localStorage.getItem(key);

删除单个数据：localStorage.removeItem(key);

删除所有数据：localStorage.clear();

得到某个索引的key：localStorage.key(index);

5、数据储存：

在有多组数据需要储存时，一般:

.建立一个新的对象，然后将多组数据储存在对象中，

.使用 JSON.stringify() 来将对象转换为字符串，

.使用localStorage.setItem(key,value);保存数据。

6、数据提取：

.使用localStorage.getItem(key)读取数据

. 使用 JSON.parse 方法将字符串转换为 JSON 对象。

. 直接引用对象的各个值。

 

   A页面
  //动态参数
    var max = $(this).attr("data-comic");

    //定义key,value值，value为传递的参数
   localStorage.setItem("comicId",max);




B页面：

//获取指定key的value值
console.log("xxx"+localStorage.getItem("comicId"));

//由于是永久性保存，所以 记得删掉或者，覆盖。
localStorage.removeItem("comicId");



//保存数据：localStorage.setItem(key,value);

//读取数据：localStorage.getItem(key);

//删除单个数据：localStorage.removeItem(key);

//删除所有数据：localStorage.clear();

//得到某个索引的key：localStorage.key(index);

 

B页面获得了 A 页面存储的  参数：