常见前端本地存储

说一说经常使用得本地存储方法

• cookie
• localStorage
• sessionStorage

cookie

cookie这个东西我以为对于前端来说都不会很陌生，浏览器都会支持cookie
HTTP cookie 在最初得时候适用于客户端存储会话信息用的，在咱们发送http请求得时候
，响应头会包含这次会话得会话信息返回给客户端，浏览器回存储这样得会话信息

而且在本地有了cookie以后，每次发送请求都会把信息发送回服务器

cookie得基本使用

cookie 得设置很简单，直接document.cookie赋值就能够，通常状况下cookie得存储格式是

document.cookie = '名字=值';

而后里边能够附带一些选项是选填得

• expires
• domain
• path
• secure

cookie的选项

expires是设置cookie得过时时间得，若是没有设置expires的话，默认是当前得会话，即关闭浏览器后cookie失效

domain是指定了cookie将要被发送得域，默认是建立了这个cookie得域名

path顾名思义，路径，就是说在请求的时候，url里边必需要存在这个路径，才会发送cookie这个消息头

secure，这个选项是一个标记，不用赋值，这个标记表明着只有经过https建立得请求才能被发送到服务器

上边讲了cookie得建立，那么修改得话是否是和建立同样呢，答案是否认得，
cookie并不能像变量同样随意得修改赋值。

cookie的修改

想要改变cookie得值得话，首先要肯定以前讲的四个选项中domain和path都是相同得才能够
，其中有一个不一样得时候都会建立出一个新的cookie好比说

Set-Cookie:name=aa; domain=aaa.net; path=/
        
Set-Cookie:name=aa; domain=aaa.net; path=/xxx

这样的话并不会修改以前得cookie ，只会建立一个新的cookie，再好比说

Set-Cookie:name=aa; domain=aa.net; path=/

Set-Cookie:name=bb; domain=aa.net; path=/

上边这种得话是会把以前得cookie修改掉的

cookie的删除

还有一个cookie得删除

在以前咱们说到了在这四个选项之中有一个过时时间，最经常使用的方法就是给cookie设置一个过时的事件，这样cookie会被浏览器删除，

固然也存在其余的删除状况，好比说浏览器被关闭，或者说 cookie超出限制，这个限制根据不一样的浏览器，数量也不同，通常都是20个

cookie经常被用来跟踪用户信息，或者校验用户身份等等，在cookie里边放一些敏感的信息是很不明智的，由于cookie是明文传输，很容易被别有用心的人利用

另外cookie自己的话，不是那种真正意义上的本地存储，由于cookie的大小最大只有4kb大

sessionStorage

上边有提到cookie的大小问题，在html5的时候，就出现了sessionStorage和localStorage

sessionStorage和localStorage 都受到同源策略限制，就是跨域问题，在访问sessionStorage和localStorage 的时候，页面必须在同一个域名，使用同一个协议，而且一个端口

sessionStorage在使用中有很严格的要求，他在一个tab页里边不能被另外一个tab页使用

应用的场景有，好比说咱们都制动，在页面刷新的时候，咱们写的js里边的变量函数等等的，内存会被释放掉，那么这个时候能够用sessionStorage来存储一些不想被释放掉内存的数据，好比说记录一个滚动条的位置，或者播放器的进度等等

sessionStorage会在标签页被关闭的时候呗清空

sessionStorage和localStorage 也有大小限制，相比cookie就大了不少，是5M

localStorage

如今说一说这个localStorage，刚才又说到sessionStorage是不能够跨页的，那么这个限制，对于我来说我感受叫他本地存储是有点牵强的，下边要说的这个localStorage，他和sessionStorage有些不一样，他能够进行跨页读取，而且他是一个真正的本地存储，他并不会由于浏览器的关闭而清除数据，若是你不进行手动清除的话，他是会一直存在的

storage 事件通信

storage事件是能够跨页面通信的，在你对storage对象进行任何操做的时候，都会出发storage事件

事件里边包括

• domain：发生变化的存储空间的域名
• key：设置或者删除的键名
• newValue：若是是设置值，则是新值；若是是删除键，则是null
• oldValue：键被更改以前的值

storage的使用

那么，在上边说了这么多屁话以后，他究竟是怎么用的呢。

经常使用的api 有

<!--存储-->
setItem('name','val')

上边这个setItem是storage的一个方法用来存储数据，第一个变量是键，第二个变量是存储得值

也能够直接用属性名称赋值 好比说

sessionStorage.name='123'

同理取值，相比也能猜出来了

<!--存储-->
getItem('name')

只须要传一个键名进去就能够取到对应得值

同理也能够直接去点属性名称

sessionStorage.name

须要注意得是 storage只能存储字符串，若是是对象或者数组等等其余数据类型得时候须要转译一下才能够存储

以上是对前端经常使用本地存储得一些认识，固然还有前端数据库好比说indexedDB Web SQL 等等，这些会在下次得时候介绍给你们，有不足之处，但愿支出