Cookie と localStorage の基本的な使用法

目次

1.クッキー

はじめに: Cookie はブラウザ側のキャッシュ ファイルであり、その容量はブラウザによって制限されます

注: Cookie 内のデータは字符串次の形式になっています。特定の値を取得したい場合は、データをキーと値のペアに分割する必要があります。

• ツールメソッドのカプセル化 (cookie-utils):

  var operator = "=";
  function getCookieValue(keyStr) {
        
        
  		var value = null; //定义容器，将比对过的key 对应的值放入容器
  		var a = window.document.cookie;
  		var arr = a.split("; "); //1.截取（分割）数据
  		for (var i = 0; i < arr.length; i++) {
        
        
  
  			var str = arr[i]; //2.将截取的数据遍历到数组
  			var k = str.split(operator)[0]; //3.取截取到数据的 key,再将其以 = 截取
  			var v = str.split(operator)[1]; //4.取截取到数据的 value,再将其以 = 截取
  			if (k == keyStr) {
        
         //如果遍历的数组中 key等于 要取的数据 则就将 key 对应的 value 值放入的 value容器中
  				value = v;
  				break;
  			}
  		}
  		return value;
  	}
  
  function setCookieValue(key,value){
        
        
  	document.cookie = key+operator+value;
  }
  
  

• 使用：

  • ページ: 保存された値

    setCookieValue("username",userInfo.username);
    								setCookieValue("userimg",userInfo.userImg);
    

  • ページ B: 値 (カプセル化されたツール メソッド js ファイルを参照する必要があります)

    var name = getCookieValue("username");
    var img = getCookieValue("userimg");
    

2.ローカルストレージ

はじめに：localStorage：より大容量のデータを保存するために

注: 文字列のみを保存できます

• ページ: JSON.stringify(userInfo)): 文字列をjson形式のデータに変換してキャッシュに保存できます

  localStorage.setItem("users",JSON.stringify(userInfo));//将 userInfo 字符串转为 json格式数据存入到缓存中
  

• ページB:

  var jsonStr =  localStorage.getItem("users");//取到的是 json 字符串
  localStorage.removeItem("users");//移除  localStroage 键值对