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

2024-06-04 20:41| 来源: 网络整理| 查看: 265

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

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的数据给清了。

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

【本文地址】

今日新闻