浏览器的存储方式有哪些

前言：浏览器本身的存储数据的方式有cookies,sessionstorage,localStroage,indexDB,web SQL

cookies 

• 存储方式

        4kb，纯文本格式，超过被忽略；

        所以很少被用于存储客户端数据；

• 存储时间

         可以设置过期时间，expires选项

         会话期cookie浏览器关闭自动清除

         持久性coolkie设置过期时间，到期后清除

•   可以和服务器对话

         在我们请求服务器的时候，服务器就可能给我们返回cookie

         我们在请求服务器的时候也会带上cookie

         一般检查是否登录是看cookie

• 可以保存的内容

          key/value；cookie都是以键值对的形式存在

          expires；cookie的最长有效时间，如果没有表示这是一个会话期cookie

           httpOnly；设置了httpOnly属性的cookie，不能使用js读取

           设置cookie，一次只能设置一个cookie

sessionStorage

• 存储大小

             2.5~10m

•  存储时间

             页面会话期可用，关闭浏览器消失

             页面刷新和恢复可用

             打开多个相同url的tab页面，会创建各自的session，即不可相互访问

             使用location.href或者window.open来打开另一个同域页面，是可以访问的

                 先操作session再打开才会有

             消除缓冲也会消失

• 不可以和服务器对话
• 可以保存任何内容 

                 键值对存储，类似于对象，整数自动转化为字符串

                 所以存储前可以使用JSON.stringify()进行转化

• 设置sessionStorage

              三种方法都可以

例如window.sessionStroage.setItem('key','value')

localStorage

•  存储大小

          2.5~10m

• 存储时间

          永久保存

           手动清除或者清除缓冲

• 不可以和服务器对话
• 可以保存任何内容
• 存储满的情况下仍继续存储并不会覆盖其他的值，而是直接报错（ Quotaexceddederroe）

            当前存储的值会被清空

• 一个页面操作了localStorage同源的页面都可以访问和操作
• 可以监听同源localStorage的修改（不监听本页面的操作）

       window.addEventListener('storage',function(e){

        console.log('....',e)

})

IndexedDB

• 存储大小

        大于250mb存

• 存储时间

         手动删除和更新

• 不可以和服务器对话
• 创建一个indexDB数据库
• 使用window.indexedDB.open('MyTestDatabase')创建一个叫myTestdatabase的数据库，open的函数的结果是一个IDBDatabase对象的实例（接收俩个参数）

         第一个参数为数据库名

        第二个参数为版本号，默认为1，必须整数