精华内容
下载资源
问答
  • 主要介绍了微信小程序 本地存储实例详解的相关资料,需要的朋友可以参考下
  • 微信小程序 本地存储

    2020-03-03 18:11:53
    微信小程序中也有本地存储的功能(最大为10MB),可以用来恢复小程序上次打开的状态,可以存储一些非实时数据用来加快页面渲染,减少用户等待时间。 微信小程序中的数据有效期和localStorage相似...

    我们知道,在HTML5中,新加入了localStorage本地存储功能,解决了cookie空间不足的问题(存储空间为4k),localStorage一般则支持5M的存储空间(不同浏览器中会有些不同)。微信小程序中也有本地存储的功能(最大为10MB),可以用来恢复小程序上次打开的状态,可以存储一些非实时数据用来加快页面渲染,减少用户等待时间。

    微信小程序中的数据有效期和localStorage相似:永不过期,除非用户主动删除或设置超过一定时间被自动清理,否则数据都一直可用。他们之间的存储也有一点不同:localStorage会把数据转化为字符串类型再存储,小程序则可以以任意类型存储,不会进行类型转换。

    在HTML5中,用 localStorage.setItem("key", "value") 将value存储到key字段,用 localStorage.getItem("key") 获取指定key本地存储的值,用localStorage.removeItem("key") 删除指定key本地存储的值。小程序中存储相对应的API:

    存储数据:

    异步:wx.setStorage 

    同步:wx.setStorageSync

    wx:setStorageSync("cates", { time: Date.now() })

    获取数据:

    异步:wx.getStorage

    同步:wx.getStorageSync

    wx.getStorageSync("cates");

    移除数据:

    异步:wx.removeStorage

    同步:wx.removeStorageSync

    wx.removeStorageSync("cates");

    清除所有数据:

    异步:wx.clearStorage

    同步:wx.clearStorageSync

    //清除所有数据不要参数
    wx.clearStorageSync()

    注:

    小程序中,不能直接修改本地存储的内容,需要通过相同的key值再设置一次,以覆盖本地原有的值。

    展开全文
  • 主要介绍了微信小程序本地存储实现每日签到、连续签到功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 微信小程序本地存储同步和异步的 区别 一.同步 1.wx.setStorageSync(); 存储值 try { wx.setStorageSync('key', 'value') } catch (e) { } 2.wx.getStorageSync(); 获取值 try { var value = wx....

    微信小程序本地存储同步和异步的 区别

    一.同步

    1.wx.setStorageSync(); 存储值

    try {
       wx.setStorageSync('key', 'value')
     } catch (e) {
     
      }
    

    2.wx.getStorageSync(); 获取值

     try {
      var value = wx.getStorageSync('key')
       if (value) {
        // Do something with return value
       }
     } catch (e) {
       // Do something when catch error
     }
    

    3.wx.removeStorageSync(); 移除指定的值

     try {
       wx.removeStorageSync('key')
     } catch (e) {
       // Do something when catch error
     }
    

    4.wx.getStorageInfoSync(); 获取当前 storage 中所有的 key

    try {
      const res = wx.getStorageInfoSync()
       console.log(res.keys)
      console.log(res.currentSize)
      console.log(res.limitSize)
     } catch (e) {
       // Do something when catch error
     }
    

    5.wx.clearStorageSync(); 清除所有的key

    try {
      wx.clearStorageSync()
     } catch(e) {
       // Do something when catch error
     }
    

    二.异步

    1.wx.setStorage(); 存储值
    单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB

    wx.setStorage({
     key:"key",
     data:"value"})
    

    2.wx.removeStorage(); 移除指定的值

    wx.removeStorage({
      key: 'key',
      success (res) {
        console.log(res)
          }})
    

    3.wx.getStorage(); 获取值

    wx.getStorage({
      key: 'key',
       success (res) {
        console.log(res.data)
       }})
    

    4.wx.getStorageInfo(); 获取当前 storage 中所有的 key

    wx.getStorageInfo({
      success (res) {
          console.log(res.keys)
       console.log(res.currentSize)
       console.log(res.limitSize)
     }})
    

    5.wx.clearStorage(); 清除所有的key

    wx.clearStorage()
    
    展开全文
  • 微信小程序 本地存储及调用

    万次阅读 2018-05-07 20:06:22
    一、本地存储//建议:在选择图片或文件后立即进行本地存储,如图片,我使用的是异步存储wx.setStorage({ key: 'Imgs',//自己去的key名,必须有,因为调用时会用到 data: tempFilePaths //及接收储图片或文件地址的...

    一、本地存储//建议:在选择图片或文件后立即进行本地存储,如图片,我使用的是异步存储

    wx.setStorage({
                      key: 'Imgs',//自己去的key名,必须有,因为调用时会用到
                      data: tempFilePaths //及接收储图片或文件地址的变量
                    })
    二、本地调用 //建议:在某项点击事件或一进入页面时立即调用
    wx.getStorage({
                key: 'Imgs',//对应存储的key名
                success: function (res) {
                  //成功之后的操作,建议还是先打印res找到需要的东西
                }
              })

    展开全文
  • 微信小程序: 前言:在微信小程序开发过程中,还会遇到很多知识运用: 一.本地存储: 在开发的过程中,常常会用到本地存储.数据存储生命周期与小程序生命周期一致 好处:有了本地缓存,你的小程序可以做到: 离线应用(已...

    微信小程序:

    前言:在微信小程序开发过程中,还会遇到很多知识运用:

    一.本地存储:

    在开发的过程中,常常会用到本地存储.数据存储生命周期与小程序生命周期一致
    好处:有了本地缓存,你的小程序可以做到:

    1. 离线应用(已测试在无网络的情况下,可以操作缓存数据)
    2. 流畅的用户体验
    3. 减少网络请求,节省服务器资源

    (一).数据支持:

    原生类型、Date、及能够通过JSON.stringify序列化的对象

    (二).方法:

    1.同步
    (1)wx.setStorageSync(); 存储值

    wx.setStorageSync("collect", collect);
    

    参数:

    参数作用
    key本地缓存中指定的 key
    success异步接口调用成功的回调函数,回调参数格式: {data: key对应的内容}
    fail异步接口调用失败的回调函数
    complete异步接口调用结束的回调函数(调用成功、失败都会执行)
    data需要存储的内容

    (2)wx.removeStorageSync(); // 移除指定的值

    wx.removeStorageSync("collect");
    

    (3)wx.getStorageSync(); 获取值

    let collect=wx.getStorageSync("collect")
    

    (4)wx.getStorageInfoSync(); 获取当前 storage 中所有的 key

      const res = wx.getStorageInfoSync()
      console.log(res.keys)
      console.log(res.currentSize)
      console.log(res.limitSize)
    

    参数:

    参数作用
    key本地缓存中指定的 key
    success异步接口调用成功的回调函数,回调参数格式: {data: key对应的内容}
    fail异步接口调用失败的回调函数
    complete异步接口调用结束的回调函数(调用成功、失败都会执行)

    (5)wx.clearStorageSync(); 清除所有的key

     wx.clearStorageSync()
    

    2.异步
    (1)wx.setStorage(); 存储值

    将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。数据存储生命周期跟小程序本身一致,即除用户主动删除或超过一定时间被自动清理,否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。

     wx.setStorage({
      	key:"key",
       	data:"value"
     })
    

    参数:

    参数作用
    key本地缓存中指定的 key
    success异步接口调用成功的回调函数,回调参数格式: {data: key对应的内容}
    fail异步接口调用失败的回调函数
    complete异步接口调用结束的回调函数(调用成功、失败都会执行)
    data需要存储的内容

    (2)wx.removeStorage(); 移除指定的值

     wx.removeStorage({
       key: 'key',
       success (res) {
         console.log(res)
       }
     })
    

    (3)wx.getStorage(); 获取值

     wx.getStorage({
       key: 'key',
       success (res) {
         console.log(res.data)
       }
     })
    

    参数:

    参数作用
    key本地缓存中指定的 key
    success异步接口调用成功的回调函数,回调参数格式: {data: key对应的内容}
    fail异步接口调用失败的回调函数
    complete异步接口调用结束的回调函数(调用成功、失败都会执行)

    (4)wx.getStorageInfo(); 获取当前 storage 中所有的 key

     wx.getStorageInfo({
       success (res) {
        console.log(res.keys)`在这里插入代码片`
         console.log(res.currentSize)
         console.log(res.limitSize)
       }
     })
    

    (5)wx.clearStorage(); 清除所有的key

    wx.clearStorage()
    

    :可以看到以Sync结尾都是同步方法

    (三).多个存储叠加:

    注意:微信小程序本地多个存储数据,要分开写.
    错误示范:

    wx.setStorageSync('hourDetail','luopanNav',res.data.data.h_detail,res.data.data.position);
    

    正确事例:

    wx.setstoragesync('hourDetail', res.data.data.h_detail );
    _this.setData({
    	report: res.data.data
    })
    wx.setstoragesync('hourDetail', res.data.data.position);
    _this.setData({
    	report: res.data.data
    })
    

    (四). 同步方法和异步方法的区别是:

    同步方法会堵塞当前任务,直到同步方法处理返回。
    异步方法不会塞当前任务

    二. 页面传参:

    当我们要查询某个商品详情时,就需要利用传参(一般是id)来向后端请求数据.常用的即导航栏
    导航栏传参:

    1. 第一页面传参,进行页面跳转

      <navigator class="" 
                 target="" 
                 hover-class="navigator-hover"
                 open-type="navigate" 
                 wx:for="{{item.children}}" 
                 wx:for-item="item" 
                 wx:for-index="index" 
                 wx:key="index" 
                 //第一页面进行传参
                 url="/pages/goods_list/index?cid={{item.cat_id}}"      
         >
         <image class="omg" src="{{item.cat_icon}}" mode="widthFix" lazy-load="false" binderror="" bindload="" />
         <view>{{item.cat_name}}</view>    
      </navigator>
      
    2. 第二页面通过页面加载获取
      在页面的右下角可以看到页面参数,这即是我们传递的参数id
      在这里插入图片描述

      onLoad: function (options) {
        // console.log(options)
        let goods_id=options.goods_id //获取id
        wx.request({
          url: 'https://api-hmugo-web.itheima.net/api/public/v1/goods/detail',
          data: {goods_id}, //向后台接口传递id
          success:(res)=>{
            this.GoodsInfo=res.data.message
            console.log(res)
            this.setData({
              shopList:res.data.message, //赋值,渲染
            })
          }
        })
      },
    

    总结:

    微信小程序开发所需要的语言比较特别,首先介绍一下需要使用到的文件类型大致分为:WXML(WeiXin Mark Language 微信标记语言)、WXSS(WeiXin Style Sheet 微信样式表)、JS(JavaScript 小程序的主体);JS文件这个与前段中使用的JS也是几乎没有区别,当然针对微信小程序新增了一些微信的API借口,并去除了一些没有必要的功能.

    展开全文
  • 微信小程序存储 需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。 pc端与微信小程序区别 使用区别 pc端设置 localStorage.setItem ("key","存放的内容") pc端的获取 localStorage....
  • //存储值 try { wx.setStorageSync('key', 'value') } catch (e) { } 2.wx.getStorageSync(); // 获取值 try { var value = wx.getStorageSync('key') if (value) { // Do something with return value...
  • 简单效果图展示:这里存储是固定数据,可更换为动态数据 一、首先在WXML中加上两个...本地存储</button> </view> <view style="margin-top:20px;"> <button type="primary" bindtap="getStor
  • 主要介绍了微信小程序 本地数据存储实例详解的相关资料,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,012
精华内容 11,204
关键字:

微信小程序本地存储

微信小程序 订阅