刷新页面时如何保留ng-click修改后的计数作为ng-init初始值？

这个问题的核心原因很明确：你当前的count1变量只存在于页面的临时作用域中，而且ng-init会在每次页面加载时重新初始化数值，刷新页面后浏览器会重新加载整个应用，内存里的计数自然就丢失了。要解决这个问题，我们需要把计数数据持久化存储，比如用浏览器的localStorage，同时把数据逻辑移到控制器中（这也是AngularJS的最佳实践，避免在视图里直接操作变量）。

下面是具体的实现步骤：

1. 重构控制器逻辑，引入持久化存储 #

首先，在你的AngularJS控制器里，为每个图片的点赞/点踩计数创建对应的逻辑，初始化时从localStorage读取已有值，没有的话用默认初始值。同时，更新计数时同步写入localStorage。

假设你的图片数据是一个数组，每个图片有唯一的id（如果没有的话，也可以用$index，但更推荐用图片自身的唯一标识，避免列表顺序变化时出问题）：

app.controller('ImageController', function($scope) {
  // 假设你的图片列表
  $scope.images = [
    { id: 1, name: '图片1', src: '图片1的地址' },
    { id: 2, name: '图片2', src: '图片2的地址' },
    // ...更多图片
  ];

  // 获取点赞计数，优先从localStorage读取，没有则用默认值15
  $scope.getLikeCount = function(imageId) {
    const storedCount = localStorage.getItem(`likeCount_${imageId}`);
    return storedCount ? parseInt(storedCount) : 15;
  };

  // 点赞逻辑：更新计数并写入localStorage
  $scope.upvote = function(imageId) {
    const currentCount = $scope.getLikeCount(imageId);
    const newCount = currentCount + 1;
    localStorage.setItem(`likeCount_${imageId}`, newCount.toString());
  };

  // 点踩逻辑同理
  $scope.downvote = function(imageId) {
    const currentCount = $scope.getLikeCount(imageId);
    const newCount = currentCount - 1;
    localStorage.setItem(`likeCount_${imageId}`, newCount.toString());
  };
});

2. 修改视图中的ng-repeat代码 #

把原来视图里的ng-init和直接修改count1的逻辑，换成调用控制器里的方法：

<div ng-repeat="image in images">
  <!-- 显示图片 -->
  <img ng-src="{{image.src}}" alt="{{image.name}}">
  
  <!-- 点赞按钮 -->
  <button class="btn btn-default" ng-click="upvote(image.id)">
    Upvote <span class="badge">{{getLikeCount(image.id)}}</span>
  </button>
  
  <!-- 点踩按钮 -->
  <button class="btn btn-default" ng-click="downvote(image.id)">
    Downvote <span class="badge">{{getLikeCount(image.id)}}</span>
  </button>
</div>

关键注意事项 #

• localStorage只能存储字符串类型，所以我们需要用parseInt读取，用toString()写入。
• 如果你的图片没有唯一id，可以暂时用$index代替，但要注意如果图片列表的顺序发生变化（比如新增/删除图片），$index对应的图片会改变，导致计数对应错误，所以最好给每个图片添加唯一标识。
• 如果需要跨会话保存（比如关闭浏览器再打开也保留），用localStorage；如果只需要当前会话内保存，用sessionStorage即可，用法和localStorage几乎一致。

这样修改后，每次点赞/点踩时，计数都会被保存到浏览器的本地存储中，刷新页面后会从本地存储读取最新的数值，就不会回到初始值了。

内容的提问来源于stack exchange，提问作者Suchetha H V