フロントエンドの共通ローカルストア

ローカルストレージの話を取得するために使用される方法

  • クッキー
  • ローカルストレージ
  • sessionStorage

私は、フロントエンドの観点でこのクッキーの事のために考えて、クッキーをサポートするブラウザに精通していない
初めてのHTTPクッキーストアセッション情報をクライアントに適した、そして我々は、HTTPリクエストを送信するための時間を持って
、レスポンスヘッダが含まれていますセッションは、クライアントにセッション情報が、バックストレージセッション情報をブラウザがこのようにして得られました

地元の後、各リクエストがサーバーに戻って情報を送信すると、クッキーを持っていました

あまりにも基本的な使用クッキー

クッキーは、直接割り当てdocument.cookie非常に簡単なセットアップされたことができ、通常の状況下ではCookieの保存形式もあります

document.cookie = '名字=值';

その後、いくつかのオプションがオプションで取得することができます内側に来ます

  • 有効期限が切れます
  • ドメイン
  • パス
  • 確保します

クッキーのオプション

後に期限が切れるクッキーの有効期限を設定することでも、設定されていない場合には有効期限が切れ、デフォルトは現在のセッションがクローズブラウザのクッキーが失敗するということでしたですました。

ドメインがあまりにもドメイン送信するクッキーを指定され、デフォルトでは、Cookieドメイン名を作成していることです

パス定義は、要求時に言うことですパスは、URLはこのパスの内側に存在している必要があり、これはクッキーヘッダを送信します

安全な、このオプションはマークではなく、割り当てがサーバーに送信されるように、このフラグが唯一のHTTPS経由のリクエストを作成する必要が表しています

トップクッキーが作成、変更および言葉は同じではありません作成していた告げ、答えは、あまりにも否定的である
修正譲渡の容易さなどの変数としてクッキーやありません。

クッキーの変更

クッキーは価値があった変更したい、そして、我々は最初の4つのオプションは、彼らが得ることができる前に、同じドメインとパスされる前に話すかを決定しなければならない
、異なる時間を持って、例えば新しいクッキーを作成する必要があります

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

クッキーが変更されていなかったの前にこのような場合には、再び、例えば、新しいクッキーを作成します。

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

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

これは、あまりにもクッキーが変更になる前に出て、その後、上にあり

クッキーの削除

また、クッキーが削除された存在であります

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

おすすめ

転載: www.cnblogs.com/netUserAdd/p/11260646.html