整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          JavaScript瀏覽器端數據存儲方案之Cooki
          
        
           
          
	
	
          
		JavaScript瀏覽器端數據存儲方案之Cookie篇
          
                        
          做項目的過程中，我們經常遇到需要把信息存儲在本地的情況，比如權限驗證的token、用戶信息、埋點計數、客戶配置的皮膚信息或語言種類等，我們可以暫存一下避免瀏覽器不必要的請求和客戶多余操作，給客戶使用帶來方便。
          那么瀏覽器存儲有哪些方法呢，主要有：cookie、localStorage、sessionStorage、IndexedDB
          Cookie
          這個講起來很簡單，了解http的同學，肯定知道，http是一個不保存狀態的協議，什么叫不保存狀態，就是一個服務器是不清楚是不是同一個瀏覽器在訪問他，在cookie之前，有另外的技術是可以解決，這里簡單講一下，就是在請求中插入一個token，然后在發送請求的時候，把這個東西帶給服務器，這種方式是易出錯，所以有了cookie的出現
          cookie是什么，cookie就是一種瀏覽器管理狀態的一個文件，它有name，也有value，后面那些看不見的是Domain、path等等，我們后面會介紹
          cookie原理
          第一次訪問網站的時候，瀏覽器發出請求，服務器響應請求后，會將cookie放入到響應請求中，在瀏覽器第二次發請求的時候，會把cookie帶過去，服務端會辨別用戶身份，當然服務器也可以修改cookie內容
          cookie不可跨域
          javascript：document.cookie='myname=name1;path=/;domain=.baidu.com';
javascript：document.cookie='myname=name2;path=/;domain=.google.com';

          當我將這兩個語句都放到瀏覽器控制臺運行的時候，你會發現一點,注意，上面兩個cookie的值是不相同的，看清楚
          顯而易見的是，真正能把cookie設置上去的只有domain是.baidu.com的cookie綁定到了域名上，所以上面所說的不可跨域性，就是不能在不同的域名下用，每個cookie都會綁定單一的域名
          cookie的屬性
          cookie的屬性眾多，我們可以來看一下下面這張圖，然后我們一個一個分析
          name
          這個顯而易見，就是代表cookie的名字的意思，一個域名下綁定的cookie，name不能相同，相同的name的值會被覆蓋掉，有興趣的同學可以試一試，我在項目中切實用到過
          value
          這個就是每個cookie擁有的一個屬性，它表示cookie的值，但是我在這里想說的不是這個，因為我在網上看到兩種說法，如下：
          • cookie的值必須被URL編碼
          • 對cookie的值進行編碼不是必須的，還舉了原始文檔中所說的，僅對三種符號必須進行編碼：分號、逗號和空格
          我在網上看到那么一種說法：
          由于cookie規定是名稱/值是不允許包含分號，逗號，空格的，所以為了不給用戶到來麻煩，考慮服務器的兼容性，任何存儲cookie的數據都應該被編碼。
          domain
          這個是指的域名，這個代表的是，cookie綁定的域名，如果沒有設置，就會自動綁定到執行語句的當前域，還有值得注意的點，統一個域名下的二級域名也是不可以交換使用cookie的，比如，你設置www.baidu.com和image.baidu.com,依舊是不能公用的
          path
          path這個屬性默認是'/'，這個值匹配的是web的路由，舉個例子：
          //默認路徑
www.baidu.com
//blog路徑
www.baidu.com/blog復制代碼

          我為什么說的是匹配呢，就是當你路徑設置成/blog的時候，其實它會給/blog、/blogabc等等的綁定cookie
          cookie的有效期
          什么是有效期，就是圖中的Expires屬性，一般瀏覽器的cookie都是默認儲存的，當關閉瀏覽器結束這個會話的時候，這個cookie也就會被刪除，這就是上圖中的——session(會話儲存)。
          如果你想要cookie存在一段時間，那么你可以通過設置Expires屬性為未來的一個時間節點，Expires這個是代表當前時間的，這個屬性已經逐漸被我們下面這個主人公所取代——Max-Age
          Max-Age，是以秒為單位的，Max-Age為正數時，cookie會在Max-Age秒之后，被刪除，當Max-Age為負數時，表示的是臨時儲存，不會生出cookie文件，只會存在瀏覽器內存中，且只會在打開的瀏覽器窗口或者子窗口有效，一旦瀏覽器關閉，cookie就會消失，當Max-Age為0時，又會發生什么呢，刪除cookie，因為cookie機制本身沒有設置刪除cookie，失效的cookie會被瀏覽器自動從內存中刪除，所以，它實現的就是讓cookie失效。
          secure
          這個屬性譯為安全，http不僅是無狀態的，還是不安全的協議，容易被劫持，打個比方，你在手機端瀏覽網頁的時候，有沒有中國移動圖標跳出來過，閑言少敘，當這個屬性設置為true時，此cookie只會在https和ssl等安全協議下傳輸
          • 提示：這個屬性并不能對客戶端的cookie進行加密，不能保證絕對的安全性
          HttpOnly
          這個屬性是面試的時候常考的，如果這個屬性設置為true，就不能通過js腳本來獲取cookie的值，能有效的防止xss攻擊,看MDN的官方文檔：
          關于js操作cookie
          document.cookie可以對cookie進行讀寫，看一下兩條指令
          //讀取瀏覽器中的cookie
console.log(document.cookie);
//寫入cookie
document.cookie='myname=laihuamin;path=/;domain=.baidu.com';

          一般在項目中使用我們都會選擇將其封裝成一個工具函數
          不過現在有一些第三方的庫做的更好、更安全，我們完全可以拿來即用，例如Js-Cookie
          用法超級和諧
          $ npm install js-cookie --save

          Create a cookie, valid across the entire site:
          Cookies.set('name', 'value');

          Create a cookie that expires 7 days from now, valid across the entire site:
          Cookies.set('name', 'value', { expires: 7 });

          Create an expiring cookie, valid to the path of the current page:
          Cookies.set('name', 'value', { expires: 7, path: '' });

          Read cookie:
          Cookies.get('name'); //=> 'value'
Cookies.get('nothing'); //=> undefined

          Read all visible cookies:
          Cookies.get(); //=> { name: 'value' }

          Delete cookie:
          Cookies.remove('name');

          Delete a cookie valid to the path of the current page:
          Cookies.set('name', 'value', { path: '' });
Cookies.remove('name'); // fail!
Cookies.remove('name', { path: '' }); // removed!

          IMPORTANT! When deleting a cookie and you're not relying on the default attributes, you must pass the exact same path and domain attributes that were used to set the cookie:
          Cookies.remove('name', { path: '', domain: '.yourdomain.com' });

          服務端如何去設置cookie
          關于怎么設置cookie，我們只要打開控制臺，看一個http的請求頭和響應頭中的東西即可明白
          服務端就是通過setCookie來設置cookie的，注意點，要設置多個cookie時，得多寫幾個setCookie，我們還可以從上圖看到，請求可以攜帶cookie給后端
          HTML標簽相關的字符串格式化
          string nl2br ( string $string )
          nl2br() 就是將\n 替換成 <br> //javascript對\n才能夠執行換行,對</br>是不能執行換行
          htmlspecialchars() 把一些預定義的字符轉換為 HTML 實體。
          string htmlspecialchars(string,quotestyle,[character-set])
          轉換以下字符及對應的實體
          & （和號） 成為 &
" （雙引號） 成為 "
' （單引號） 成為 '
< （小于） 成為 <
> （大于） 成為 >
          第二個參數: ENT_COMPAT 只轉換雙引號, 保留單引號, 為默認值 compat: 兼容性
          ENT_QUOTES 同時轉換兩種引號 quotes: 引號
          ENT_NOQUOTES 不對引號進行轉換
          <html>
<body>
<?php
$str="John & \" 'Adams'";
echo htmlspecialchars($str, ENT_COMPAT);
echo "<br />";
echo htmlspecialchars($str, ENT_QUOTES);
echo "<br />";
echo htmlspecialchars($str, ENT_NOQUOTES);
?>
</body>
</html>
          輸出結果:John & " 'Adams'
          John & " 'Adams'
          John & " 'Adams'
          htmlentities() 可以將所有的非ASCII碼字符轉換為對應的實體代碼;除字母、數字、\外, 漢字和鍵盤上其他字符都轉換
          <?php
$str="A 'quote' \" is <b>bold</b>" ;
echo htmlentities ( $str ); // 輸出后源代碼: A 'quote' is <b>bold</b>
echo htmlentities ( $str , ENT_QUOTES ); // 輸出后源代碼: A 'quote' is <b>bold</b>
?>
          返回的結果:A 'quote' "is <b>bold</b>
          A 'quote' "is <b>bold</b>
          注意: htmlspecialchars()和htmlentities作用直接輸出HTML腳本
          htmlspecialchars()和htmlentities()函數對于轉義字符"\"處理,不會轉義實體代碼,要么當轉義字符對待,要么原樣輸出;
          PHP中htmlentities和htmlspecialchars的區別
          這兩個函數的功能都是轉換字符為HTML字符編碼, 特別是url和代碼字符串。防止字符標記被瀏覽器執行。
          使用中文時沒什么區別, 但htmlentities會格式化中文字符使得中文輸入是亂碼。
          htmlentities轉換所有的html標記, htmlspecialchars只格式化& ' " < 和 > 這幾個特殊符號
          addslashes() 在指定的預定義字符前添加反斜杠。
          這些預定義字符是：單引號 (') 雙引號 (") 反斜杠 (\) NULL字符(\x00)
          提示：該函數可用于為存儲在數據庫中的字符串以及數據庫查詢語句準備合適的字符串。
          注釋：默認情況下，PHP 指令 magic_quotes_gpc 為 on，對所有的 GET、POST 和 COOKIE數據自動運行 addslashes()。
          不要對已經被magic_quotes_gpc轉義過的字符串使用 addslashes()，因為這樣會導致雙層轉義。
          遇到這種情況時可以使用函數 get_magic_quotes_gpc() 進行檢測。(如:$c=(!get_magic_quotes_gpc())?addslashes($c):$c;)
          在本例中，我們要向字符串中的預定義字符添加反斜杠：
          <?php
$str="Who's John Adams?";
echo $str . " This is not safe in a database query.<br />";
echo addslashes($str) . " This is safe in a database query.";
?>
          輸出：
          Who's John Adams? This is not safe in a database query.
          Who\'s John Adams? This is safe in a database query.
          <?php
header("Content-type:text/html; charset=utf-8");
$str="wo are \x0a studying \x00 php";
echo $str;
echo "<br>";
echo addslashes($str);
?>
          輸出:
          wo are studying php
          wo are studying >wo are studying \0 php< php


          stripslashes() 刪除反斜線（"\"）
          在提交的表單數據中 ' " \ 等字符前被自動加上一個\ ,這是配置文件php.ini中選項magic_quotes_gpc在起作用，
          默認是打開的，如果不處理則將數據保存到數據庫時，有可能會被數據庫誤當成控制符號而引起錯誤。
          通常htmlspecialchars()和stripslashes()函數復合的方式，聯合處理表單中的提交的數據htmlspecialchars(stripslashes())
          strip_tags()
          string strip_tags ( string $str [, string $allowable_tags ] )
          剝去 HTML、XML 以及 PHP 的標簽。
          <?php
echo strip_tags("Hello <b><i>world!</i></b>","<b>");
?>
          輸出結果:Hello world!
          實例:
          <?php
$str="<b>webserver;</b> & \ 'Linux' & Apache";
echo "$str"; //直接輸出
echo "<br/>";
echo htmlspecialchars($str,ENT_COMPAT); //只轉換雙引號,為默認參數
echo "<br />";
echo htmlspecialchars($str,ENT_NOQUOTES); //不對引號進行轉換
echo "<br />";
echo htmlspecialchars($str,ENT_QUOTES); //同時轉換單引號和雙引號
echo "<br />";
echo htmlentities($str); //將所有的非ASCII碼字符轉換為對應的實體代碼
echo "<br />";
echo addslashes($str); //將" ' \ 字符前添加反斜線
echo "<br />";
echo stripslashes($str); //刪除反斜線
echo "<br />";
echo strip_tags($str); //刪除<html>標記
?>
          輸出結果:
          webserver; & \ 'Linux' & Apache
          么是cookie？
          cookie用于存儲web頁面的用戶信息。
Cookie 是一些數據, 存儲于你電腦上的文本文件中。
當 web 服務器向瀏覽器發送 web 頁面時，在連接關閉后，服務端不會記錄用戶的信息。
Cookie 的作用就是用于解決 "如何記錄客戶端的用戶信息":
當用戶訪問 web 頁面時，他的名字可以記錄在 cookie 中。
在用戶下一次訪問該頁面時，可以在 cookie 中讀取用戶訪問記錄。
          創建cookie
          javascript可以使用document.cookie屬性來創建、讀取、及刪除cookie。
          //可以為cookie添加一個過期時間，默認情況下，cookie在瀏覽器關閉時刪除
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
          讀取cookie
          var x=document.cookie;
	document.cookie 將以字符串的方式返回所有的 cookie，
  類型格式： cookie1=value; cookie2=value; cookie3=value;
          刪除cookie
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
精品黑人一区二区三区|
久久99热狠狠色精品一区|
99久久精品国产高清一区二区|
国产麻豆剧果冻传媒一区|
无码av人妻一区二区三区四区|
国产精品一区不卡|
精品国产日产一区二区三区|
久久毛片免费看一区二区三区|
精品无码人妻一区二区三区
|
波多野结衣一区二区三区高清av|
日韩AV无码一区二区三区不卡|
国产在线一区二区杨幂|
无码中文字幕人妻在线一区二区三区|
亚洲欧美国产国产一区二区三区
|
一区二区三区免费视频观看|
亚洲一区二区精品视频|
无码一区二区三区亚洲人妻|
一区二区三区日本视频|
亚洲综合一区无码精品|
中文字幕在线精品视频入口一区
|
亚洲一区二区三区在线网站|
欧美日韩精品一区二区在线观看|
一区二区三区在线看|
成人欧美一区二区三区在线视频|
国产福利精品一区二区|
国产手机精品一区二区|
精品亚洲AV无码一区二区三区|
亚洲一区二区三区久久|
韩国美女vip福利一区|
免费高清在线影片一区|
亚洲高清偷拍一区二区三区|
一区二区三区日本电影|
国产91大片精品一区在线观看|
精品国产一区二区三区在线观看|
亚洲变态另类一区二区三区
|
久久一区二区三区精品|
亚洲色婷婷一区二区三区|
中文字幕av人妻少妇一区二区|
www.亚洲一区|
国产一区二区三区乱码网站|
高清一区二区三区|