Front-end common local store

The method used to obtain local storage talk

  • cookie
  • localStorage
  • sessionStorage

I think for this cookie thing in terms of front-end are not very familiar with, the browser will support cookie
HTTP cookie for the first time was suitable for a client to store session information, and we have time to send http request
, the response header will include the session was the session information back to the client, the browser back to the storage session information thus obtained

After the local and had cookie, with each request will send information back to the server

Basic use cookie too

cookie was set up very simple, direct assignment document.cookie can, under normal circumstances cookie storage format is too

document.cookie = '名字=值';

Then comes inside can get some of the options are optional

  • expires
  • domain
  • path
  • secure

cookie options

After expires is to set the cookie expiration time was too, if not set expires, the default is the current session was that close the browser cookie fail

domain is designated a cookie to be sent too domains, the default is to have created the cookie domain name

path definition, the path, that is to say at the time of the request, url must exist inside this path, this will send the cookie header

secure, this option is a mark, not an assignment, this flag represents only have to create through https request to be sent to the server

Told top cookie was created, modified and have created words are not the same, the answer is negative too,
cookie and not as variable as the ease of a modified assignment.

cookie changes

Want to change the cookie was worth, then, we must first determine speak before the four options are the same domain and path before they can get
, which has a different time will have to create a new cookie for example,

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

In this case before the cookie was not modified, it will create a new cookie, for example, again

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

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

This is on top, then get out before too cookie will modify

cookie deletion

There is also a cookie was deleted

在之前我们说到了在这四个选项之中有一个过期时间,最常用的方法就是给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 等等,这些会在下次得时候介绍给大家,有不足之处,希望支出

Guess you like

Origin www.cnblogs.com/netUserAdd/p/11260646.html