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. Ubuntu的root用户通过SSH登录的解决方法

    通过ISO镜像安装完ubuntu 系统后,我们不能直接使用putty或其他远程工具通过SSH方式连接到linux系统 原因: linux 系统上没有安装远程工具openssh-server 解决方法: ...

  2. fastadmin后台视频文件上传,受限制,修改php.ini配置即可

    post_max_size = 50M(根据情况)upload_max_filesize  = 50M(根据情况)

  3. SVN服务器的安装

    运行VisualSVN-Server-2.7.3.msi程序, 如下图 点击Next, 下一步 选中 I accept选项, 点击Next, 下一步 选择默认配置, 服务和控制台组件方式, 点击Nex ...

  4. 吐血整理,一文读懂中国金融衍生品市场的前世今生和未来[z]

    [z]https://www.gfedu.cn/cfrm/content_22687.shtml 从定义上来说,金融衍生工具(derivativesecurity)是在货币.债券.股票等传统金融工具的 ...

  5. git push 本地项目推送到远程分支[z]

    大家有的时候,会在本地新建项目,这里说一下在本地项目建立本地git仓库,然后push到远程仓库的步骤 1.在本地项目的文件夹下,git仓库初始化 git init 初始化本地git仓库 2. git ...

  6. JavaScript中的bind,call和apply函数的用法和区别

    一直没怎么使用过JavaScript中的bind,call和apply, 今天看到一篇比较好的文章,觉得讲的比较透彻,所以记录和总结如下 首先要理解的第一个概念,JavaScript中函数调用的方式, ...

  7. JS原生上传大文件显示进度条-php上传文件

    JS原生上传大文件显示进度条-php上传文件 在php.ini修改需要的大小: upload_max_filesize = 8M    post_max_size = 10M    memory_li ...

  8. CL_GUI_FRONTEND_SERVICES 使用问题

    CL_GUI_FRONTEND_SERVICES(SAP操作Windows文件) 这个类下面的方法均为静态方法,引用的时候以=>来引用方法 注意:在执行CL_GUI_FRONTEND_SERVI ...

  9. linux常用命令(14)which命令

    我们经常在linux要查找某个文件,但不知道放在哪里了,可以使用下面的一些命令来搜索:    which  查看可执行文件的位置.   whereis 查看文件的位置.    locate   配合数 ...

  10. fastjson反序列化LocalDateTime失败的问题java.time.format.DateTimeParseException: Text '2019-05-24 13:52:11' could not be parsed at index 10

    本地java类 import org.springframework.format.annotation.DateTimeFormat; import java.time.LocalDateTime; ...