クッキーとlocalStorageの違いと使用
3850 ワード
localStorageはHTML 5の新機能の一つで、その役割は前に学んだクッキーに似ていて、物を保存することができますが、彼らの間にはどんな違いがありますか?今日はいくつかの資料を探して、自分が収集した違いを以下のように書きました.
クッキーのサイズは約4 kで、互換性はie 6以上で互換性があり、ブラウザとサーバ間で往復伝達されるため、サーバ環境で実行され、期限切れを設定することができ、デフォルトの期限切れはセッションの終了です.localStorageのサイズは約5 Mで、互換性はie 7以上で互換性があり、ブラウザがあれば可能で、サーバの環境で実行する必要はなく、手動でクリアしない限り、ずっと存在します.
次は両者の使い分けです.まずlocalStorageの使用ですが、その使用方法は2つあり、どちらも書き込みと読み取りを実現できる機能です.手動で削除する2つは、以下で詳しく説明します.ここでは、単一をgetItemで削除し、すべてをclearで削除します.Itemの最初の文字はi大文字であることを覚えておいてください.
localStorageの表示方法:F 12を押してアプリケーション(resource)を見つけてlocalStorageをクリックし、表示する必要がある書き込みがあります.
1つ目は、一般的な書き方です.
2つ目は標準的な書き方です.
Cookieの使い方:cookieを書く:document.cookie='212'; cookieを読む:alert(document.cookie);expires:有効期限ar oDate=new Date()を設定します.oDate.setDate(oDate.getDate()+3); document.cookie='a=212;expires='+oDate; path:/(ルートディレクトリ)は現在のディレクトリdocumentがデフォルトで存在する.cookie='b=212;path=/;expires='+oDate; domain:ドメイン名を保存(1級ドメイン名を置く)document.cookie='a=212;domain=www.baidu.com;expires='+oDate; Cookieの保存、取り、削除cookie:function setCookie(name,value,iDay);取得cookie:getCookie(name)削除cookie:removeCookie(name)function removeCookie(name){setCookie(name,'任意値',iDay)};
Webページのスキンケア機能:
クッキーのサイズは約4 kで、互換性はie 6以上で互換性があり、ブラウザとサーバ間で往復伝達されるため、サーバ環境で実行され、期限切れを設定することができ、デフォルトの期限切れはセッションの終了です.localStorageのサイズは約5 Mで、互換性はie 7以上で互換性があり、ブラウザがあれば可能で、サーバの環境で実行する必要はなく、手動でクリアしない限り、ずっと存在します.
次は両者の使い分けです.まずlocalStorageの使用ですが、その使用方法は2つあり、どちらも書き込みと読み取りを実現できる機能です.手動で削除する2つは、以下で詳しく説明します.ここでは、単一をgetItemで削除し、すべてをclearで削除します.Itemの最初の文字はi大文字であることを覚えておいてください.
localStorageの表示方法:F 12を押してアプリケーション(resource)を見つけてlocalStorageをクリックし、表示する必要がある書き込みがあります.
1つ目は、一般的な書き方です.
//
localStorage.a = 12;
//
alert(localStorage.a );
2つ目は標準的な書き方です.
// setItem
localStorage.setItem('b','today is a good day');
localStorage.setItem('c','i am happy to see you');
// localStorage.removeItem('c');//
//localStorage.clear();// ，
// getItem
alert(localStorage.getItem('b'));
Cookieの使い方:cookieを書く:document.cookie='212'; cookieを読む:alert(document.cookie);expires:有効期限ar oDate=new Date()を設定します.oDate.setDate(oDate.getDate()+3); document.cookie='a=212;expires='+oDate; path:/(ルートディレクトリ)は現在のディレクトリdocumentがデフォルトで存在する.cookie='b=212;path=/;expires='+oDate; domain:ドメイン名を保存(1級ドメイン名を置く)document.cookie='a=212;domain=www.baidu.com;expires='+oDate; Cookieの保存、取り、削除cookie:function setCookie(name,value,iDay);取得cookie:getCookie(name)削除cookie:removeCookie(name)function removeCookie(name){setCookie(name,'任意値',iDay)};
Webページのスキンケア機能:
<link rel="stylesheet" id="link1" href="css/1.css"/>
<input type="button" value=" "/>
<input type="button" value=" "/>
<input type="button" value=" "/>
<script type="text/javascript" src="js/cookie.js"/>
<script>
var oLink=document.getElementById('link1');
var aBtn=document.getElementsByTagName('input');
var oBgName=getCookie('bgName');
if(oBgName){
oLink.href='css/'+oBgName+'.css';
}
for (var i=0;i<aBtn.length;i++) {
(function(index){
aBtn[index].onclick=function(){
var _index=index+1;
oLink.href='css/'+_index+'.css';
setCookie('bgName',_index,3);
};
})(i);
}
</script>
</code></pre>
<p>// Cookie.js </p>
<pre><code>function setCookie(name,value,iDay){
if(iDay){
var oDate=new Date();
oDate.setDate(oDate.getDate()+iDay);
document.cookie=name+'='+value+';path=/;expires='+oDate; ？
}else{
document.cookie=name+'='+value+';path=/;';
}
};
function getCookie(name){
var arr=document.cookie.split('; ');
for (var i=0;i<arr.length var="" arr2="arr[i].split('='); " name="value" if="" return="" function="" removecookie="" setcookie=""/></code></pre>
<p>1.css</p>
<pre><code>body{
background-color: #000;
}
</code></pre>
<p>2.css</p>
<pre><code>body{
background-color: #f00;
}
</code></pre>
<p>3.css</p>
<pre><code>body{
background-color: blue;
}
</code></pre>
</article>
</div>
</div>