AngularJS 页面之间传递数据 + 页面刷新

2023-11-26

我试图在应用程序的结账过程中在页面之间传递数据,但它没有按应有的方式工作。我已经阅读了一些内容,大多数人建议使用服务,但唯一的问题是,当刷新页面时(用户单击刷新或稍后返回),服务中的所有数据都会消失。这是有道理的,因为服务中的数据并不意味着是持久的,但它会导致问题。

所以问题是:如何在 AngularJS 中的页面之间传递数据,并且在页面刷新后仍然保留传递的数据?

这是到目前为止我的代码(我尝试使用查询字符串):

.service('checkoutService', 
          function checkoutService($location, Address, $routeParams, TicketGroup) {
    var ticket_quantity = 0;
    var ticket_group = {};
    var selected_address = {};

    this.loadInformation = function() {
        if(!ticket_quantity && $routeParams.ticket_quantity)
            ticket_quantity = $routeParams.ticket_quantity;
        if(!ticket_group && $routeParams.ticket_group_id)
            ticket_group = TicketGroup.get({id: $routeParams.ticket_group_id});
        if(!selected_address && $routeParams.address_id)
            selected_address = Address.get({id: $routeParams.address_id});
    }

    this.setTicketQuantity = function(quantity) {
        ticket_quantity = quantity;
        $location.path().search({ticket_quantity: quantity});
    }
    this.getTicketQuantity = function() {
        return ticket_quantity;
    }

    this.setTicketGroup = function(object) {
        ticket_group = object;
        $routeParams.ticket_group = object.id;
    }
    this.getTicketGroup  = function() {
        return ticket_group;
    }

    this.setSelectedAddress = function(object) {
        selected_address = object;
        $routeParams.address_id = object.id;
    }
    this.getSelectedAddress = function() {
        return selected_address;
    }
});

有多种选择可以做到这一点,

  1. 对于较小的数据集,您可以使用$cookieStore,对于 4k 以下的数据
  2. 另一种选择,尤其是对于大型数据集,是使用本地存储然后在页面加载/重新加载时检索数据。
  3. 如果它只是非常少量的数据,或者在多个页面中使用的数据,您可以使用 $rootscope,但这不是最好的选择,因为它就像污染全局名称空间一样。
  4. 最后一个选项,取决于数据的检索方式,service可以实现,这基本上是一个可以传递到各种角度范围的单例。

Note:只有前两个是持久的。

在你的情况下我认为使用本地存储 or the 饼干店将是您最好的选择。您正在尝试使用一项服务,如果您不希望它持久存在(离开页面或刷新页面),那么这将是合适的。服务是由角度管理的单例,注入时您将在每次注入中获得对同一对象的引用。但是,当返回页面时,该单例将需要重新初始化,从而丢失所有先前的数据。使服务持久化的唯一方法是从数据库、本地文件或其他地方的 noSQL 加载数据。但是,我认为这并不是您真正想要的。

如果您有兴趣追求本地存储实现,请查看这些模块角度本地存储, ng存储或这个answer

如果你想使用 cookiestore 看看这个answer

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJS 页面之间传递数据 + 页面刷新 的相关文章

随机推荐

  • 如何在 redux 操作(或操作中分配的其他回调)上下文中使用 jest 测试 `image.onload`

    我的问题是我正在尝试对一个函数进行单元测试 但不知道如何测试它的一部分 这是一个 React Redux 操作 执行以下操作 1 使用图像 url 检索 json 数据 2 将图像加载到 Image 实例中并将其大小分派给减速器 当使用 I
  • document.write 的替代品是什么?

    在教程中我学会了使用document write 现在我明白 许多人对此不以为然 我试过了print 但随后它实际上将其发送到打印机 那么我应该使用什么替代方案 为什么我不应该使用document write w3schools 和 MDN
  • JavaScript 中现有的 OCR 脚本 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 目前不接受答案 我有一个 CMS 增强功能的想法 从图像 例如扫描文档 中提取文本信息 并且想知道是否已经有任何东西可以帮助我 基本上 我想知道是否有一个用 Jav
  • 当iframe的来源是javascript时浏览器会做什么

    当 iframe 的来源是 javascript as in 到底是怎么回事 src javascript 是什么意思告诉浏览器做什么 path src 有什么作用 谢谢 克里斯 它告诉浏览器显示执行空字符串文字的结果 因此 它只会显示一个
  • 如何在客户端检查 YouTube 上是否存在视频

    我在做验证我的Youtube网址文本字段 我需要检查一下 如果Youtubeurl不存在我应该抛出错误 我按照这个answer并创建了jsfiddle检查它 它适用于有效的 url 但不适用于无效的 url 我所看到的只是 404 错误ne
  • Objective-C 中的异步调用

    我正在尝试从网站 xml 获取数据 一切正常 但是 UIButton 一直处于按下状态 直到返回 xml 数据 因此如果互联网服务出现问题 则无法纠正 并且应用程序实际上无法使用 以下是通话内容 AppDelegate appDelegat
  • Android studio 1.5.1:找不到属性“vectorDrawables”

    我正在使用 Android Studio 1 5 1 Gradle 2 8 和我的项目最小 sdk 版本 14 目标 sdk 版本 23 所以 当我通过 Google 文档将 vectorDrawables 添加到配置时 添加了 Vecto
  • 如何在字符串集合中高效查找指定长度的相同子串?

    我有一个收藏S 通常包含 10 50 个长字符串 出于说明目的 假设每个字符串的长度范围在 1000 到 10000 个字符之间 我想找到指定长度的字符串k 通常在 5 到 20 的范围内 是每个字符串的子串S 显然 这可以使用一种简单的方
  • UIButton改变位置

    我在 IB 中设置了一个按钮 我设置了 IBOutlet 并链接到它的屏幕对象 有没有办法以编程方式更改按钮位置和 或大小 我知道您可以更改标题和某些内容 但我不知道如何更改其位置或大小 现在我想相应地改变它的位置 是否可以 如果是 请告诉
  • Javascript:找到字符串中最长的单词

    function longestWord string var str string split var longest 0 var word null for var i 0 i lt str length 1 i if longest
  • 如何从剔除绑定中获取 DOM 元素?

    我已经使用淘汰赛将 DOM 元素绑定到 viewModel 当我更改底层模型上的属性时 它会更改 DOM 一切正常 但是 有没有办法获取绑定的 DOM 元素 以便当底层模型从外部更新时我可以向其中添加一个类 我使用了自定义绑定 它使我可以访
  • 什么时候可以完全优化掉 volatile 变量?

    考虑这个代码示例 int main void volatile int a static volatile int b volatile int c c 20 static volatile int d d 30 volatile int
  • 无法在 android studio 中创建 AVD

    我是安卓新手 我刚刚安装了 Android Studio 并创建了一个默认项目 现在我正在尝试创建 AVD 但无法创建 确定按钮未启用 请帮忙 附截图 问题是你没有安装系统镜像 请检查下图 要启动 SDK 管理器 请单击 Android S
  • 如何整合 Flask 和 Scrapy?

    我正在使用 scrapy 来获取数据 我想使用 Flask Web 框架在网页中显示结果 但我不知道如何调用烧瓶应用程序中的蜘蛛 我尝试过使用CrawlerProcess呼叫我的蜘蛛 但我收到这样的错误 ValueError ValueEr
  • 我无法查看 Android 版 Firebase Crashlytics 的崩溃详细信息,并卡在“构建并运行您的应用程序”上

    我在完成 Firebase 设置后尝试设置 Firebase Crashlytics 崩溃已成功发送 我可以在 firebase 仪表板中看到它们 但是当我进入 crashlytics 查看崩溃详细信息时 我陷入了第 3 步 构建并运行您的
  • iTerm 2 不支持 .tmux.conf 中声明的键绑定

    我正在使用最新稳定版本的 iTerm2 2 0 和最新的 Homebrew 版本的 tmux 1 9a 不幸的是 我的键绑定声明于 tmux conf不能在 集成模式 下使用 iTerm2 tmux 组合 即当 iTerm2 接管 tmux
  • 使用 Apache POI 进行低内存写入/读取

    我正在尝试编写一个相当大的 XLSX 文件 4M 单元 但遇到一些内存问题 我无法使用 SXSSF 因为我还需要读取模板中的现有单元格 我可以做些什么来减少内存占用吗 也许将流读和流写结合起来 为了用低内存处理大数据 最好的也是我认为唯一的
  • Linux 上的哪个库中有系统调用,该库如何链接到包含系统调用的可执行目标文件?

    我知道系统调用不在C 标准库中 是否有系统调用所在的库 某种系统库 如果有这样的库 这个库如何链接到可执行程序 A 系统调用可以以几种不同的方式工作 具体取决于目标架构 但无论如何 它是not图书馆的电话 它是正在运行的用户空间程序调用内核
  • 从静态库创建共享库时保留所有导出的符号

    我正在从静态库创建一个共享库 但我没有源代码 许多 Stack Overflow 问题都提供了answers关于如何做到这一点 gcc shared o libxxx so Wl whole archive libxxx a Wl no w
  • AngularJS 页面之间传递数据 + 页面刷新

    我试图在应用程序的结账过程中在页面之间传递数据 但它没有按应有的方式工作 我已经阅读了一些内容 大多数人建议使用服务 但唯一的问题是 当刷新页面时 用户单击刷新或稍后返回 服务中的所有数据都会消失 这是有道理的 因为服务中的数据并不意味着是