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. [CSP-S模拟测试]:联合权值·改(暴力)

    题目传送门(内部题143) 输入格式 输入文件的第一行为三个整数$n,m,t$.其中$t$是数据类型. 接下来$m$行,每行两个正整数$u,v$,表示图中的一条边.数据保证不存在重边或自环的情况.   ...

  2. ThinkPHP3.2版本对于Model的使用

    THinkphp3.2的改动很大,特别是应用了命名空间的概念,这个命名空间很类似于.NET和Java的命名空间,通过引用就可以调用,由于前期一直是搞.NET,对命名空间自认为是比较了解的,在没有完全理 ...

  3. koa 基础(二十五)数据库 与 art-template 模板 联动 --- 新增数据

    1.视图层 根目录/views/index.html <!DOCTYPE html> <html lang="en"> <head> <m ...

  4. PHP获取文件扩展名五种以上的方法和注释

    在PHP面试中或者考试中会有很大几率碰到写出五种获取文件扩展名的方法,下面是我自己总结的一些方法 $file = ‘需要进行获取扩展名的文件.php’; //第一种,根据.拆分,获取最后一个元素的值f ...

  5. 堆排序 java

    <pre name="code" class="java">package heapSort; /** * 大根堆 * @author root * ...

  6. 【React自制全家桶】三、React使用ref操作DOM与setState遇到的问题

    在React中同时使用ref操作DOM与setState常常会遇到 比如操作的DOM是setState更新之前的DOM内容,与想要的操作不一致.导致这样的原因是setState函数是异步函数. 就是当 ...

  7. [笔记] Delphi使用DUnitX做单元测试的简单例子

    Delphi XE 提供了对DUnitX的支持,记录一个最简例子. 首先创建项目A,然后创建单元untCalc,代码如下: unit untCalc; interface type TCalc = c ...

  8. java:常见问题(解决获取properties乱码,解决poi自适应宽度)

    1.解决获取properties乱码 File cf = new File("D:\\app\\java_jar\\config.properties"); String[] pa ...

  9. python数据存储-- CSV

    CSV,其文件以纯文本形式存储表格数据(数字和文本),CSV记录简由某种换行符分隔字段间分隔又其他字符,常见逗号或者制表符, 例如: #coding:utf-8 import csv headers ...

  10. 使用robotframework做接口测试二——处理响应数据

    初使用RequestsLibrary做接口测试时,你会不会感到困惑,为什么会有${resp.content}, ${resp.status_code}这样的写法,这个status_code什么鬼,f5 ...