(二十三) 离线应用与客户端存储

1. 离线检测

返回boolean值， 表示是否在线

navigator.onLine

网络状态监听

<script>
    // 如果离线变在线
    window.addEventListener('online', () => {
      console.log('online')
    })
    // 如果在线变离线
    window.addEventListener('offline', () => {
      console.log('offline')
    })
  </script>

2. cookie 的使用与封装

cookie 主要有三种操作：读取、写入、删除

<script>
    var cookieutils = {
      // 获取cookie
      get: function (name) {
        let cookieString = document.cookie
        let cookieArr = cookieString.split(';')
        let resultObject = {}
        cookieArr.forEach((item) => {
          let key = decodeURIComponent(item.split('=')[0])
          let value = decodeURIComponent(item.split('=')[1])
          resultObject[key] = value
        })
        return resultObject[decodeURIComponent(name)]
      },
      // 设置cookie
      set: function (key, value, expires) {
        let cookieString = encodeURIComponent(key) + '=' + encodeURIComponent(value)
        // 清除cookie
        if (typeof expires === 'number') {
          cookieString += ';expires=Thu Jan 01 1970 08:00:00 GMT+0800'
        }
        if (typeof expires === 'string') {
          expires = new Date(expires)
          cookieString += ';expires=' + expires
        }
        document.cookie = cookieString
      },
      // 移除cookie
      remove: function (key) {
        this.set(key,'', -1)
      }
    }
    console.log(cookieutils.get('age'))
    cookieutils.set('name', '周', '2020-05-09 23:59:59')
    cookieutils.remove('name')
  </script>