一、localStorage

1. 存储大小

2.5~10M

2. 存储时间

永久保存
只能手动清除或者清除缓存
可以保存任意内容

3.存储溢出

localStorage满了的情况下仍继续存储并不会覆盖其他的值，而是直接报错(QuotaExceededError) ，当前存储的值会被清空
操作方式和sessionStorage一样
一个页面操作了localStorage同源的页面都可以访问和操作

4. 可监听变化

可以监听同源localStorage的修改（不监听本页面的操作）

window.addEventListener('storage', function(e) {
    
    
  console.log('---',e)
});

本地存储不能存对象要先转化为字符串

5.增

//方式1
window.localStorage.setItem('key','value')
//方式2
window.sessionStorage['key'] = 'value';
//方式3
window.sessionStorage.key= value;

1.如果value不是string 类型的数据会默认调用toString（）方法
2.如果传入的是一个对象这时候就会出错了会变成Object

解决方案：JSON.stringify(对象)

6.读

//方式1
localStorage.getItem('key')
//方式2
localStorage.key

如果key是一个对象则会将其输出为String类型的字符串

解决方案 JSON.parse(对象)

7.删除

//方式1
localStorage.removeItem('key')
//方式2
delete localStorage.key;

8.全删

localStorage.clear()

二、sessionStorage

1.存储时间

页面会话期可用，关闭浏览器消失
页面刷新和恢复也可用
打开多个相同url的tab页面，会创建各自的session，即不可相互访问

2.与localStorage操作对比

将local替换为session其他都一样

3.总结

LocalStorage和SessionStorage之间的主要区别在于浏览器窗口和选项卡之间的数据共享方式不同。

LocalStorage可跨浏览器窗口和选项卡间共享。就是说如果在多个选项卡和窗口中打开了一个应用程序，而一旦在其中一个选项卡或窗口中更新了LocalStorage，则在所有其他选项卡和窗口中都会看到更新后的LocalStorage数据。

但是，SessionStorage数据独立于其他选项卡和窗口。如果同时打开了两个选项卡，其中一个更新了SessionStorage，则在其他选项卡和窗口中不会反映出来。举个例子：假设用户想要通过两个浏览器选项卡预订两个酒店房间。由于这是单独的会话数据，因此使用SessionStorage是酒店预订应用程序的理想选择。

三、cookie

1.存储大小

4KB，纯文本格式，超过被忽略
所以很少被用于存储客户端数据

2.存储时间

可以设置过期时间，expires选项
会话期cookie浏览器关闭自动清除
持久性cookie设置过期时间，到期后清除

可以和服务器对话

在我们请求服务器的时候，服务器可能会给我们返回cookie
我们在请求服务器的时候也会带上cookie
一般检查是否登录是看cookie

3.增

document.cookie = 'test1=hello';
document.cookie = 'test2=world';

4.读

//只能获取所有的
const allCookies = document.cookie;

5.删

只能通过设置它的expires属性为一个过去的日期

6.参数

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/"    // 设置cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT"    // 删除cookie

1.expires

过期时间，当过了到期日期时，浏览器会自动删除该cookie，如果想删除一个cookie，只需要把它过期时间设置成过去的时间即可
比如希望设置过期时间一年：new Date().getTime() + 365 * 24 * 60 * 60 * 1000

如果不设置过期时间，则表示这个cookie生命周期为浏览器会话期间，只要关闭浏览器窗口，cookie就消失了。

2.path

路径，值可以是一个目录，或者是一个路径。
如果cc.com/test/index.html 建立了一个cookie，那么在cc.com/test/目录里的所有页面，以及该目录下面任何子目录里的页面都可以访问这个cookie。因此在cc.com/test/test2/test3 里的任何页面都可以访问cc.com/test/index.html建立的cookie。若cc.com/test/ 若想访问cc.com/test/index.html设置的cookes，需要把cookies的path属性设置成“/”。
在指定路径的时候，凡是来自同一服务器，URL里有相同路径的所有WEB页面都可以共享cookies。

3.domain

主机名，是指同一个域下的不同主机，例如：www.baidu.com和map.baidu.com就是两个不同的主机名。默认情况下，一个主机中创建的cookie在另一个主机下是不能被访问的，但可以通过domain参数来实现对其的控制：document.cookie = “name=value;domain=.baidu.com”
这样，所有*.baidu.com的主机都可以访问该cookie。

四、IndexedDB

待更新

javaScript 浏览器存储方式

目录