首页 > 其他分享 >歌手页面收藏功能之本地存储localstorage之save

歌手页面收藏功能之本地存储localstorage之save

时间:2023-09-20 20:45:36浏览次数:52  
标签:compare song items 存储 item localstorage key save 页面

收藏功能: 一、本地存储代码,array-storage.js: import storage from 'good-storage'   function insertArray(arr, val, compare) {   const index = arr.findIndex(compare)   if (index > -1) {     // index>-1说明val在arr中存在     return   }   arr.unshift(val)   // 插入到数组的前面 }
export function save(item, key, compare) {   const items = storage.get(key, [])   // 这行代码的作用是尝试从存储中获取与给定 key 相关的数据。如果成功获取数据,它将存储在 items 变量中;如果无法获取数据,或者 key 不存在,那么将使用默认值,即一个空数组。最终,items 变量中将包含从存储中获取的数据或空数组。   insertArray(items, item, compare)   // items、item 和 compare。它的作用是向数组 items 中插入一个新的元素 item,并使用比较函数 compare 来确定插入的位置。   // 在内部定义compare函数,但compare函数的内部细节由外部去定义即可,   return items } 二、在constant.js定义key并导出: export const FAVORITE_KEY = '__favorite__' 三、将钩子函数实现收藏功能相关逻辑封装到use-favorite.js中: 主要代码: function toggleFavorite(song) {     let list     if (!isFavorite(song)) {       // remove     } else {       list = save(song, FAVORITE_KEY)     }     song.commit('setFavoriteList', list, compare)     function compare(item) {       return item.id === song.id     }   }

标签:compare,song,items,存储,item,localstorage,key,save,页面
From: https://www.cnblogs.com/Ly021/p/17718354.html

相关文章

  • IIS报错:HTTP 错误 404.2 - Not Found 由于Web服务器上的”ISAPI和CGI限制”列表设置,无
     解决方法:  ......
  • 企业微信内置应用的h5页面,内部按钮关闭页面
    以下内容非原创,遇到这个问题,查到这位大佬的做法,所以记录下来,以便于之后自己查阅。原文链接:https://blog.csdn.net/qq_22182989/article/details/125674826遇到的问题:在做vue项目时,需求是要在微信环境内。微信h5页面要求前端控制退出时关闭页面功能。如果是在微信外其他浏览器......
  • 页面层次拖拽效果
    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headrunat="server"> <......
  • dedebiz内容页面获取当前页面路径的标签
    dedebiz获取当前页面路径的标签,仅在内容页使用,栏目页没有效果的。{dede:fieldname='arcurl'/}在栏目页想获取当前栏目的路径及名称的话,就要用下面这个标签。{dede:type}<ahref="[field:typelink/]">[field:typename/]</a>{/dede:type}获取网站所有栏目名称及路径列......
  • Http Fetch+StreamSaver.js在内存有限的设备下载大文件
    目前前端没有很好的api支持流式的文件的分片下载。如果直接把整个文件保存到Blob对象中再保存,有可能出现很多不可以预期的问题,可能会因为达到浏览器的Blob对象上限而下载失败。也有机会因为客户端内存太低而导致OOM。那如果我们有额外的文件服务器的话,可以选择把文件先导出到文件......
  • HarmonyOS 管理页面跳转及浏览记录导航
    历史记录导航使用者在前端页面点击网页中的链接时,Web组件默认会自动打开并加载目标网址。当前端页面替换为新的加载链接时,会自动记录已经访问的网页地址。可以通过forward()和backward()接口向前/向后浏览上一个/下一个历史记录。在下面的示例中,点击应用的按钮来触发前端页面的后......
  • springMvc页面跳转---重定向和转发
    准备工作1.导入json依赖点击查看代码<!--jsp需要依赖!jstl--><dependency><groupId>jakarta.servlet.jsp.jstl</groupId><artifactId>jakarta.servlet.jsp.jstl-api</artifactId><version>3.......
  • 视频监控/视频汇聚平台EasyCVR平台页面展示优化
    安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快,可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等,以及支持厂家私有协议与SDK接入,包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安防视频监控的能力,也具备接入AI智能分析的能......
  • 视频监控系统/视频汇聚平台EasyCVR平台页面展示优化
    安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快,可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等,以及支持厂家私有协议与SDK接入,包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安防视频监控的能力,也具备接入AI智能分析的......
  • 【HarmonyOS】元服务卡片router实现跳转到指定页面
    ​【关键字】元服务卡片、router跳转不同页面 【写在前面】本篇文章主要介绍开发元服务卡片时,如何实现从卡片中点击事件跳转到指定的应用内页面功能。此处以JSUI开发服务卡片为例,JS卡片支持组件设置action,包括router事件和message事件,其中router事件用于应用跳转,message事件......