html5存储笔记（慕课网）

1、本地存储（localstorage && sessionstorage）

2、离线缓存（application cache）

3、IndexedD 和 Web Sql

由于我是初学者，离线缓存和IndexedD 和 Web Sql我看了视频也不是很清楚，对这两张种比较感兴趣的可以上慕课网---html5存储课程看。

链接：点击打开链接

本地存储：

API

--localstorage与sessionstorage

存储形式

--key--》value

过期

1）localstorage：永久存储，永不失效，除非手动删除

2）sessionstorage：会话结束就失效

大小

--官方给出的文档是，每个域名5M

浏览器支持情况：（这是比较老的）



使用方法

--getItem

--setItem

--removeItem

--key

--clear

使用注意事项：

1）使用前要判断浏览器是否支持

2）写数据时候，需要异常处理，避免超出容量抛错

3）避免吧敏感的信息存入localstorage

4）key的唯一性

使用限制：

1）存储更新策略，过期控制

我们可以通过业务逻辑代码进行控制，代码示例如下：

function set(key, v) {

            var curTime = new Date().getTime();

            localStorage.setItem(key, JSON.stringify({ data: v, time: curTime }));

        }

        //exp为过期天数

        function get(key, exp) {

            var data = localStorage.getItem(key);

            var dataObj = JSON.parse(data);

            if (new Date().getTime() - dataObj.time > exp) {

                console.log('expires');

            } else {

                console.log("data=" + dataObj.data);

            }

        }

2）子域名之间不能共享存储数据

3）超出存储大小之后如何存储（LRU，FIFO）

      这个我还去实现，有实现的大神，求示例。。。

4）server端如何取到

      与cookie不一样，localStorage没有与http请求头一起传递到服务端，所以我们想要获取localStorage只能是url带参数传递过去。

使用场景

1）利用本地数据，减少网络传输

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

今天就这样子啦。。有错误和改进的地方，请告诉我，谢谢。