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

前端 使用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. From 7.8 To 7.14

    From 7.8 To 7.14 大纲 学科 英语的话每天早上背单词, 争取每天做一篇完型, 一篇阅读, 一篇短文填空, 一篇改错, 一篇七选五??? 似乎太多了, 先试一下吧 语文的话, 尝试翻译一 ...

  2. 化学结构SDF文件

    参考博客 第一行:一般作为分子名字,如 Levetiracetam 第二行:注释,ChemDraw06111413562D 第三行:一般是空行 第四行:是原子个数 键的个数等的起始行. M END所在 ...

  3. LeetCode 144. 二叉树的前序遍历(Binary Tree Preorder Traversal)

    题目描述 给定一个二叉树,返回它的 前序 遍历. 示例: 输入: [1,null,2,3] 1 \ 2 / 3 输出: [1,2,3] 进阶: 递归算法很简单,你可以通过迭代算法完成吗? 解题思路 由 ...

  4. phpmyadmin 导入sql报错(sql为phpstudy内置数据库导出来)

    解决方法 1.打开sql,把头部注释去掉

  5. JPEG格式 介绍

    JPEG格式 jpeg是有损压缩格式, 将像素信息用jpeg保存成文件再读取出来,其中某些像素值会有少许变化.在保存时有个质量参数可在[0,100]之间选择,参数越大图片就越保真,但图片的体积也就越大 ...

  6. leetcode-hard-array-287. Find the Duplicate Number

    mycode   77.79% class Solution(object): def findDuplicate(self, nums): """ :type nums ...

  7. 微服务一键启动脚本shell没有环境变量的

    #!/bin/bash#######################################################export JAVA_HOME=/root/data/app/jd ...

  8. 在Excel中,已知身份证号码,如何批量计算其实际年龄?

    昨天,上司问我:..,你会在Excel中计算年龄吗?当时,一下促住了.说真的,还真不会.今天研究了一下,写下来,方便日后查看. 首先,得有一张已知姓名和相应身份证号的原表吧. 在这张表上再加上三列:出 ...

  9. iOS 应用"无法安装应用程序 因为证书无效"的解决方案

    原因是由于iOS7.1要安装企业应用,url必须是https的,不能是http,这就要求我们的服务器要支持https.因此,只要将原链接: itms-services://?action=downlo ...

  10. Web jsp开发学习——数据库的另一种连接方式(配置静态数据库连接池)

    1.导包   2.找到sever里的sever.xml,配置静态数据库连接池 <Context docBase="bookstore" path="/booksto ...