浏览器储存方案学习与总结

var Path = 'gallery/'

var Gallery = {
  images: [
    {
      name: 'Darth Vader',
      alt: 'A Black Clad warrior lego toy',
      url: 'gallery/myLittleVader.jpg',
      credit:
        '<a href="https://www.flickr.com/photos/legofenris/">legOfenris</a>, published under a <a href="https://creativecommons.org/licenses/by-nc-nd/2.0/">Attribution-NonCommercial-NoDerivs 2.0 Generic</a> license.'
    },
    {
      name: 'Snow Troopers',
      alt: 'Two lego solders in white outfits walking across an icy plain',
      url: 'gallery/snowTroopers.jpg',
      credit:
        '<a href="https://www.flickr.com/photos/legofenris/">legOfenris</a>, published under a <a href="https://creativecommons.org/licenses/by-nc-nd/2.0/">Attribution-NonCommercial-NoDerivs 2.0 Generic</a> license.'
    },
    {
      name: 'Bounty Hunters',
      alt: 'A group of bounty hunters meeting, aliens and humans in costumes.',
      url: 'gallery/bountyHunters.jpg',
      credit:
        '<a href="https://www.flickr.com/photos/legofenris/">legOfenris</a>, published under a <a href="https://creativecommons.org/licenses/by-nc-nd/2.0/">Attribution-NonCommercial-NoDerivs 2.0 Generic</a> license.'
    }
  ]
}

// 注册 service worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker
    .register('/sw-test/sw.js', {
      scope: '/sw-test/' // 指定作用域限制在/sw-test/下
    })
    .then(function(reg) {
      if (reg.installing) {
        // 注册中
        console.log('Service worker installing')
      } else if (reg.waiting) {
        // 等待注册
        console.log('Service worker installed')
      } else if (reg.active) {
        // 注册成功
        console.log('Service worker active')
      }
    })
    .catch(function(error) {
      // 注册失败
      console.log('Registration failed with ' + error)
    })
}

// XHR 加载图片

function imgLoad(imgJSON) {
  // 返回Promise
  return new Promise(function(resolve, reject) {
    var request = new XMLHttpRequest()
    request.open('GET', imgJSON.url)
    request.responseType = 'blob'

    request.onload = function() {
      if (request.status === 200) {
        var arrayResponse = []
        arrayResponse[0] = request.response
        arrayResponse[1] = imgJSON
        resolve(arrayResponse)
      } else {
        reject(
          Error(
            "Image didn't load successfully; error code:" + request.statusText
          )
        )
      }
    }

    request.onerror = function() {
      reject(Error('There was a network error.'))
    }

    // Send the request
    request.send()
  })
}

var imgSection = document.querySelector('section')

window.onload = function() {
  // load each set of image, alt text, name and caption
  for (var i = 0; i <= Gallery.images.length - 1; i++) {
    imgLoad(Gallery.images[i]).then(
      function(arrayResponse) {
        var myImage = document.createElement('img')
        var myFigure = document.createElement('figure')
        var myCaption = document.createElement('caption')
        var imageURL = window.URL.createObjectURL(arrayResponse[0])

        myImage.src = imageURL
        myImage.setAttribute('alt', arrayResponse[1].alt)
        myCaption.innerHTML =
          '<strong>' +
          arrayResponse[1].name +
          '</strong>: Taken by ' +
          arrayResponse[1].credit

        imgSection.appendChild(myFigure)
        myFigure.appendChild(myImage)
        myFigure.appendChild(myCaption)
      },
      function(Error) {
        console.log(Error)
      }
    )
  }
}

// service worker 注册之后，浏览器会尝试为你的页面或站点安装并激活它
// install 事件在安装完成之后触发
self.addEventListener('install', function(event) {
  // waitUntil 直到里面的代码执行完毕才完成install
  event.waitUntil(
    // 调用 Cache API 存储资源，Cache API 并不被每个浏览器支持，需要添加polyfill或使用indexDB，它们都是异步的
    caches.open('v1').then(function(cache) {
      return cache.addAll([
        '/sw-test/',
        '/sw-test/index.html',
        '/sw-test/style.css',
        '/sw-test/app.js',
        '/sw-test/image-list.js',
        '/sw-test/star-wars-logo.jpg',
        '/sw-test/gallery/bountyHunters.jpg',
        '/sw-test/gallery/myLittleVader.jpg',
        '/sw-test/gallery/snowTroopers.jpg'
      ])
    })
  )
})
// 每次任何被 service worker 控制的资源被请求到时，都会触发 fetch 事件
self.addEventListener('fetch', function(event) {
  // respondWith() 方法劫持我们的 HTTP 响应
  event.respondWith(
    caches
      .match(event.request) // 匹配请求的资源与缓存的是否相同，这个匹配通过 url 和 vary header进行
      .then(function(response) {
        // caches.match() 总是会返回 resolves
        // 但只有成功的时候有值
        if (response !== undefined) {
          // 如果有匹配，直接返回缓存资源
          return response
        } else {
          // 如果无匹配，请求
          return fetch(event.request)
            .then(function(response) {
              // 拷贝一份响应加入缓存
              let responseClone = response.clone()
              caches.open('v1').then(function(cache) {
                cache.put(event.request, responseClone)
              })
              // 返回原始响应
              return response
            })
            .catch(function() {
              // 请求失败的处理
              return caches.match('/sw-test/gallery/myLittleVader.jpg')
            })
        }
      })
  )
})

// 获取sessionStorage对象的键值对长度
sessionStorage.length

// 按键值对的方式保存数据
sessionStorage.setItem('key', 'value')

// 根据键名获取数据
let data = sessionStorage.getItem('key')

// 接受一个数值 n 作为参数，返回存储对象第 n 个数据项的键名
sessionStorage.key(0) // 'key'

// 根据键名删除保存的数据
sessionStorage.removeItem('key')

// 删除所有保存的数据
sessionStorage.clear()

Storage.prototype.removeKey = function(key) {
  this.removeItem(this.key(key))
}
// 存入数据
sessionStorage.setItem('name', 'jack')
sessionStorage.setItem('age', '20')
sessionStorage.setItem('height', '178')
sessionStorage.setItem('weight', '60')

console.log(sessionStorage.age) // 20 可以通过键名直接访问
sessionStorage.age = 30 // 30 可以通过键名修改

Object.keys(sessionStorage) // ["height", "name", "age", "weight"]
sessionStorage.removeKey(0) // 将会删除 height

window.addEventListener(
  'storage',
  function(e) {
    console.log('storage change', e)
  },
  false
)

window.onpopstate = function(event) {
  alert(
    'location: ' + document.location + ', state: ' + JSON.stringify(event.state)
  )
}
// 绑定事件处理函数.
history.pushState({ page: 1 }, 'title 1', '?page=1') //添加并激活一个历史记录条目 http://example.com/example.html?page=1,条目索引为1
history.pushState({ page: 2 }, 'title 2', '?page=2') //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2
history.replaceState({ page: 3 }, 'title 3', '?page=3') //修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为3
history.back() // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back() // 弹出 "location: http://example.com/example.html, state: null
history.go(2) // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3}

function notifyMe() {
  var notification

  // 先检查浏览器是否支持
  if (!('Notification' in window)) {
    alert('This browser does not support desktop notification')
  }
  // 检查用户是否同意接受通知
  else if (Notification.permission === 'granted') {
    // If it's okay let's create a notification
    notification = new Notification('Hi there!', {
      body: 'Nice to meet you!'
    })
    console.log(notification.title) // Hi there!
  }

  // 否则我们需要向用户获取权限
  else if (Notification.permission !== 'denied') {
    Notification.requestPermission().then(function(permission) {
      // 如果用户同意，就可以向他们发送通知
      if (permission === 'granted') {
        notification = new Notification('Hi there!', {
          body: 'Nice to meet you!'
        })
      }
    })
  }
  notification.onclick = function(event) {
    console.log('notification onclick', event)
  }
  notification.onshow = function(event) {
    console.log('notification onshow', event)
  }
  notification.onerror = function(event) {
    console.log('notification onerror', event)
  }
  notification.onclose = function(event) {
    console.log('notification onclose', event)
  }
  // 5s 后自动关闭
  setTimeout(function() {
    notification.close()
  }, 5000)
}