Localstorage、sessionStorage、cookie 以及其他存储方式的区别

发现了 Localstorage、sessionStorage 还能监后，又去看了下 cookie ，总结了一些差异性

共同点：都是保存在浏览器端、且同源的！

区别：

1. 存储方式：cookie 数据始终在同源的 http 请求中携带（即使不需要），即 cookie 在浏览器和服务器间来回传递，而 sessionStorage 和 localStorage 不会自动把数据发送给服务器，仅在本地保存。cookie 数据还有路径（path）的概念，可以限制 cookie 只属于某个路径下
2. 存储大小限制：cookie 数据不能超过 4K，同时因为每次 http 请求都会携带cookie、所以 cookie 只适合保存很小的数据，如会话标识。sessionStorage 和 localStorage虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大
3. 数据有效期：sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie 过期时间之前有效，即使窗口关闭或浏览器关闭
4. 作用域不同：sessionStorage 不在不同的浏览器窗口中共享，即使是同一个页面；localstorage 在所有同源窗口中都是共享的；cookie 也是在所有同源窗口中都是共享的
5. web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者
    
6. web Storage 的 api 接口使用更方便

 

　　以上是pc常用的一些存储方式，那么，在h5浏览器中，存储方式又有些许的不同

　　　　1.cookie

• 这个存储是以前大多网站的存储站点。
• 容易被清除。
• 同时 cookie 会在每一次通信过程中传向服务端。
• 同时 cookie 有一个很好的地方就是，它本身有一个过期时间属性，可以用来标注一个变量的有效期。
• cookie 一旦过期就会被自动删除掉

2.localStorage、sessionStorage

• localStorage: 持久存储，只要用户不主动删除就会一直存在。
• sessionStorage：面向 session 的浏览器存储，因此只存在于一个页面的生命周期内，关闭即清除两者均采用键值对的形式存储数据

3.indexedDB

• 内嵌在浏览器端的非关系型数据库，数据以键值对的形式存储，兼容性良好
• indexDB 直接操作的存储对象是 ObjectStore，这有点类似其他数据库中 table 概念

4.websql

• 内嵌在浏览器的关系型数据库，前端可以像在使用 mysql、Oracle 一样的写 sql 语句，并存储信息。兼容性良好。存储后可在浏览器 resource 中查看

5.window 变量

• 生命周期有限，一般大家也不会去使用。但是对于全局变量的临时存储来说，还是一个不可多得的好地方

6.flash cookie

• flash cookie 以前用的地方比较多,现在 flash cookie 不建议使用