localStorage/sessionStorage/cookie

html5本地存储主要有两种localStorage和sessionStorage

       都是使用相同api,存入后都是字符串类型

localStorage和sessionStorage使用方法:

           1.setItem(key,value)   存储数据

                   

           2.getItem(key)   获取数据

                    

 

           3.removeItem(key)      删除某一个缓存数据

           4.clear()                        清空所有缓存数据

           5.key(index)                 根据下标来获取存储字段

 

cookie:

            test=test:就是存储的值和对应的名字     Max-Age=3600  就是过期时间1个小时 

            

           获取就是console.log(document.cookie);

 

localStorage、sessionStorage、cookie注意点：

        1.只能存储字符串，所以对象、数组、函数的储存需要转化字符串

                       使用JSON.stringify(value);存将对象转化为字符串格式；

                    使用JSON.parse(value);将字符串格式转化为对象；

          2.本地存储只能针对同源策略，其他不是同源的标签页面不能获取当前标签页的缓存

         3.性能与存储的大小无关，减少读取item的次数就能提高性能，所以多存少读，就能提高新能

localStorage：

         1.没有储存时间限制，关闭浏览器还是会保存数据；

          2.容量2~5Mb左右

sessionStorage：

           1.关闭浏览器时清空数据；

           2.各个浏览器不一，个别浏览器没有上限；

           

cookie:

            1关闭浏览器数据不清空，

            2可设置过期时间

            3.无论是服务端设置的还是客服端设置的，都会在请求头里带上cookie

            4.有大小限制，最好不超过4000字节

 

indexedDB使用方法：

           是html5的数据库：也是一种存储方法

           1.创建数据库

                 注意：版本号只能升，不能降，不然创建不成功

                 

                 用法：

                 

 

           2.在数据库创建"表"

                注意：1.必须在版本号升级中触发，才可以建表

                           

                              2.创建时，还有一个参数，有两种方式可以配置存放key的值         

                                     方法1：

                                             

                                             

                                       方法2：

                                              

 

                   3.存数据的方法add(data)(前提：创建时必须配置存key的方式)

                                

                               模式有两种：readwrite读写和readonly只读;

                     获取数据：get(key);   getAll()//获取所有数据

                            

                        修改数据：put(data);  既可以修改，也可以新增;也有回调事件同获取

                         以keyPath:id存储为例：如果表存在id:1004则是修改，不存在则是新增；

                         

                   删除数据：delete(key);也有回调事件同获取

                         

                   全部删除:clear();也有回调事件同获取

                         

 

               4.索引：

                      是key的升级版，有时候不想用系统的key,就可以使用索引，自定义key

                            创建时：createIndex(表，自定义的key,是否唯一)

                                

                            获取时：

                                            就可以通过index(表名字).get(自定义key)来获取值

                                        

 

                         5.游标：store.openCursor()  就是范围遍历

                                   1.IDBKeyRange.only();查询唯一

                                      

 

                                   2.IDBKeyRange.upperBound(),小于等于输出，如果有true,就只是小于

                                     

 

                                        cursor.update({数据})更新某项值,cursor.delete({数据})删除数据

                                   3.IDBKeyRange.lowerBound(),大于等于输出，如果有true,就只是大于

                                     用法同上。。。。

                                   4.IDBKeyRange.bound(n,m,true,true) 

                                                //参数1就是大于等于n，

                                          //参数2就是小于等于m，

                                          //参数3控制参数1，为true只大于， 

                                          //参数4控制参数2，为true只小于

 

                             6.索引+游标的好处：

                                       索引按值搜索+游标范围遍历