[k]H5存储-慕课笔记(1)

$2  H5的几种存储

(1).本地存储(localStorage & sessionStorage)

(2).离线缓存(application cache)

(3).IndexdDB和Web SQL

一：H5本地存储

1、基本概念：

(0)API--localStorage && sessionStorage

(1)存储形式： key-->value

(2)过期策略：

localStorage可以永久存储，除非手动delete。

sessionStorage关闭浏览器或重新打开标签页面时消失。(即：回话结束时，session就会被清除掉)

(3)大小：官方称每个域名5M

(4)可以存储:

css/js文件--(通过ajax把脚本拉回来，用responseText把他们存进去)

数组--(直接存，肯定不可以，需先序列化成字符串再存储)

json数据--(需先stringify成字符串再存储)

图片--(通过canvas中间转义层。Canvas有一个安全策略的问题：如果图片和本身请求的域名不是同一个，会报一个安全的策略。这个时候你需要给你的图片服务器加一个accessOrigin = 'all' ，这样可以保证你的图片可以被跨域访问)

(5)浏览器支持情况：

PC：IE8+，Firefox，Chrome

Mobile：ios Safari 3.2+ ,Android Browser 2.1+

2、localStorage API介绍

-getItem 取记录 如：localStorage.getItem('name')

-setItem 设置 如：localStorage.setItem('name','tom')

-removeItem 移除 如：localStorage.removeItem('name')

-key 索引 如： 如：localStorage.key(0)

-clear 全部删掉 如：如：localStorage.clear()

注：sessionStorage 的API同localStorage 的API

3、H5本地存储使用注意事项：

(1).使用前要判断浏览器是否支持（无痕模式不支持/一些奇葩浏览器不支持,通常setItem异常捕获比window.localStorage靠谱）

(2).写数据时候，需要异常处理，避免超出容量抛错（单个域名，容量5M）

(3).避免把敏感的信息存入localStorage

(4).key的唯一性（同key后边的会覆盖前边的）

4、H5本地存储使用限制：

(1).永久保存，需要自己写存储更新策略，过期控制。

(2).子域名之间不能共享存储数据(跨域问题),可通过H5的postMessage解决。

(3).超出存储大小之后如何存储(LRU,FIFO淘汰旧数据)

(4).若server端要取到，这需要手工放入post或get请求中。

5、H5本地存储使用场景：

(1).更新频率低的数据，可以利用本地存储，减少网络传输

(2).弱网络环境下，高延迟，低带宽，尽量把数据本地化