常见前端本地存储

不愧本心

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

  • 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 等等,这些会在下次得时候介绍给大家,有不足之处,希望支出

阅读 1.4k

急需100个bug续命

472 声望
13 粉丝
0 条评论

急需100个bug续命

472 声望
13 粉丝
文章目录
宣传栏