js跳转页面并传值以及localStorage的用法

Bertha 。 2022-08-09 00:49 311阅读 0赞

之前写一个页面需要跳转页面，那个页面需要这边这个页面的“跳转按钮”所执行的一系列的函数的值，我用的是

window.location.href=url;

然而这样只能实现跳转页面，并不带任何传值。

想了想，其实浏览器中能跨几个页面的数据也就那么几种，session、localStorage、web SQL、本地数据库、文件操作……。

因为人懒，不想用数据库。所以就着手考虑了localStorage和session。localStorage因为存储容量比较大，比较适合我的情况。

所以我就来讲讲我用localStorage的方法吧。

1、首先，你得在那个页面把数据存入localStorage中吧。这个是必须的！

localStorage.setItem("user",JSON.stringify(data.allUser));

用localStorage的setItem方法，这个方法看名字都知道得差不多了吧。。。

setItem把数据存入localStorage中（如果这个localStorage对象并没有创建的话，他会帮你创建一个。）

后面的JSON.Stringify(data.allUser)中，data.allUser是我想要的值，一个json对象，这个就是把json格式的数据转换成键值对的形式存入localStorage中，localStorage是一个以键值对为唯一形式的数据

总的来说，这句代码也就是把data.allUser转换成键值对形式存入localStorage变量user中。

2、跳转页面

这个跳转页面的方法就五花八门了，你开心就好

3、在另一个页面的js中获取localStorage中的数据

var user = JSON.parse(localStorage.getItem("user"));

把键值对格式转换为json格式并赋值给一个js变量。

4、localStorage传值结束了。

最重要的，如果是比较隐私的数据，记得使用完localStorage传值后删除localStorage中的数据，因为我发现在浏览器F12里面能轻轻松松看到所有localStorage数据。所以我还加了一句：

localStorage.removeItem("user");

把localStorage中user的数据给清了。

其实，都是因为我懒，不想在新的页面重新弄那些函数，也许多调用几个函数也可以，但是懒啊，懒人也有懒办法嘛。虽然这样安全系数不高，但是玩玩还是可以的。这里也就是给大家介绍介绍这个方法，若有什么缺陷欢迎指出。最后，不喜请轻喷。。。

发表评论取消回复

表情：

评论列表（有 0 条评论，311人围观）

还没有评论，来说两句吧...

相关阅读

相关 js跳转页面并传值以及localStorage的用法

之前写一个页面需要跳转页面，那个页面需要这边这个页面的“跳转按钮”所执行的一系列的函数的值，我用的是 window.location.href=url; 然而

Bertha 。/ 2022年08月09日 00:49/ 0 赞/ 312 阅读

相关 H5页面跳转与传值

页面之间的跳转经常使用a标签，使用mvc框架的都是通过访问controller的请求方法，返回请求页面。但本次开发，前端与后台完全分离，前端APP使用HBuide

太过爱你忘了你带给我的痛/ 2022年07月13日 15:49/ 0 赞/ 273 阅读

相关 JavaScript 页面跳转并传值,解析url成对象

一、页面跳转 1.window.location.href=”test01.html”;//本地页面跳转 2.window.open(“test01.html”) //

叁歲伎倆/ 2022年06月11日 05:12/ 0 赞/ 527 阅读

相关页面跳转传值angularjs

默认排序 [![Ye Huang][]][Ye Huang 1] [Ye Huang][Ye Huang 1] [http://yehuang.me][http_yeh

小鱼儿/ 2022年06月05日 03:36/ 0 赞/ 261 阅读

相关 js实现页面跳转，页面A跳到另一个页面B，以及页面传值

参考博文：[https://www.cnblogs.com/lyggqm/p/5688028.html][https_www.cnblogs.com_lyggqm_p_5688

清疚/ 2022年05月14日 02:14/ 0 赞/ 324 阅读

相关 JS实现页面跳转并传值

第一个页面 page1.html `<html> ` `<head> ` ` ``<title>Page``1``</title> ` ` ``<sc

傷城~/ 2022年04月23日 07:30/ 0 赞/ 275 阅读

相关 js页面跳转并传值问题

js页面跳转并传值问题 1.js实现页面跳转传值出现乱码 function search(){ var keyword=$("search i

叁歲伎倆/ 2022年04月02日 03:22/ 0 赞/ 294 阅读

相关 js页面跳转传值

[https://www.cnblogs.com/lyggqm/p/5688028.html][https_www.cnblogs.com_lyggqm_p_5688028.h

柔情只为你懂/ 2022年03月15日 03:42/ 0 赞/ 289 阅读

相关 JAVASCRIPT 页面跳转传值

在WEB页面中，我们实现页面跳转的方法通常是用LINK,BUTTON LINK ,IMG LINK等等，由用户点击某处，然后直接由浏览器帮我们跳转。但有时候，需要当某事件

谁践踏了优雅/ 2021年12月20日 05:55/ 0 赞/ 398 阅读

相关 html5页面跳转传值以及哈希加密

要实现从一个页面A跳到另一个页面B，js实现就在A的js代码加跳转代码 JS跳转大概有以下几种方式第一种：(跳转到b.html) <script lang

快来打我*/ 2021年09月18日 17:44/ 0 赞/ 374 阅读