A页面
html代码:
 姓名:<input type="text" id="name1">
年龄:<input type="text" id="age1">
<button id="click_btn">点击</button>
js代码:
 // localStorage.name = "张三";
// localStorage.age = 18;//可存储多组数据 var btn = document.getElementById("click_btn");
btn.onclick = function () {
// var username = 'zhangsan'
var username = document.getElementById("name1").value;
// var userage = '13';
var userage = document.getElementById("age1").value;
//存放所有值到数组里
var arrLocalStorage = [username, userage]; //存储,IE6~7 cookie 其他浏览器HTML5本地存储
if (window.localStorage) {
localStorage.setItem("localName", arrLocalStorage);
} else {
Cookie.write("localName", arrLocalStorage);
} } //参考了 https://blog.csdn.net/ZhushiKezhang/article/details/80360998
B页面
js代码:
 // var myname = localStorage["name"];//myname 为张三
// console.log(myname) //使用localStorage 和 Cookie相结合的方式传递参数 //条件判断 取localStorage存储值或cookie存储的值
var StoreDate = window.localStorage ? localStorage.getItem("localName") : Cookie.read("localName");
var arrStoreDate = StoreDate.split(","); console.log(arrStoreDate);//取出所有存储的值 console.log(arrStoreDate[0]);//取出第一个值 姓名
console.log(arrStoreDate[1]);//取出第二个值 年龄 // for (var i = 0; i < arrStoreDate.length; i++) {
// var liHtml = "<li>" + arrStoreDate[i] + "</li>";
// $('.list').append(liHtml);
// }

前端 使用localStorage 和 Cookie相结合的方式跨页面传递参数的更多相关文章

  1. 十一 三种Struts2的数据封装方式,封装页面传递的数据

    Struts2的数据封装:Struts2是一个web层框架,框架是软件的半成品.提供了数据封装的基本功能. 注:Struts2底层(核心过滤器里面的默认栈里面的拦截器,具体见struts-defaul ...

  2. SpringMVC 页面传递参数到controller的五种方式

    一共是五种传参方式: 一:直接将请求参数名作为Controller中方法的形参 public  String login (String username,String password)   : 解 ...

  3. (网页)html中页面传递参数不用cookie不用缓存,js方法搞定

    function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&] ...

  4. Android通过DeepLink方式跳转其他App传递参数

    网上对于安卓DeepLink方式跳转传递参数的例子较少,说的也不客观,实践之后发现还是有一些坑.其实为什么要用DeepLink方式跳转,有些是因为引流的原因,他们希望通过网页就能直接跳转到App的界面 ...

  5. vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...

  6. localStorage和cookie的跨域解决方案

    原文转自:点我 前言 localStorage和cookie大家都用过,我前面也有文章介绍过,跨域大家也都了解,我前面也有文章详细描述过.但是localStorage和cookie的跨域问题,好多小伙 ...

  7. localstorage sessionstorage cookie的区别

    一.基本概念 Cookie cookie比较小,大小限制在4kb左右,是网景公司的前雇员 LouMontulli 在1993年3月的发明.它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记 ...

  8. 前端之web上传文件的方式

    前端之web上传文件的方式 本节内容 web上传文件方式介绍 form上传文件 原生js实现ajax上传文件 jquery实现ajax上传文件 form+iframe构造请求上传文件 1. web上传 ...

  9. sessionStorage 、localStorage 与cookie 的异同点

    cookie 容量4kb,默认各种浏览器都支持,缺陷就是每次请求,浏览器都会把本机存的cookies发送到服务器,无形中浪费带宽.userdata,只有ie支持,单个容量64kb,每个域名最多可存10 ...

随机推荐

  1. log4j 多进程配置要注意的

    多进程写日志文件 方法一: 解决log4j公用配置文件,多进程同时写同一个log文件,因存在操作系统pv操作问题, 导致部分日志丢失.解决方案是不同的进程写不同的log文件 测试于:Log4j 1.2 ...

  2. easyui编辑editor

    $.extend($.fn.datagrid.defaults.editors, { textarea: { init: function(container, options){ var input ...

  3. (九)C语言之scanf

  4. TCP层shutdown系统调用的实现分析

    概述 shutdown系统调用在tcp层会调用两个函数,对于ESTABLISHED状态需要调用tcp_shutdown关闭连接,对于LISTEN和SYN_SENT状态则需要以非阻塞模式调用tcp_di ...

  5. HDX Insight Installation & Configuration

    NetScaler Insight Center 11.1 Installation & Configuration   NetScaler Insight Center 11.0 Insta ...

  6. SpringSecurity remember-me功能

    1./login .and().formLogin().loginPage("/user/login.html") //在successHandler中,使用response返回登 ...

  7. bootstrap-table前端实现多条件时间段查询数据

    实现思路:通过正则匹配到字段是否符合条件,时间段转换为时间戳比对. 这是大体的效果图: 页面的html代码 <div class="content-head mgb10"&g ...

  8. mysql 查询锁表,解锁

    //1.查看当前数据库锁表的情况   SELECT * FROM information_schema.INNODB_TRX;   //2.杀掉查询结果中锁表的trx_mysql_thread_id ...

  9. LC 302. Smallest Rectangle Enclosing Black Pixels【lock, hard】

    An image is represented by a binary matrix with 0 as a white pixel and 1 as a black pixel. The black ...

  10. oracle imp 工具可能出现的问题