집 > 기사 > 웹 프론트엔드 > JS 프론트엔드 캐시 구현 방법 및 쿠키의 특징 소개

JS 프론트엔드 캐시 구현 방법 및 쿠키의 특징 소개

小云云원래의: 2018-02-07 13:23:511955검색

프런트엔드 브라우저에서는 첫 번째 요청 시 일부 데이터(예: 데이터 사전의 데이터)를 가져와 js 개체에 저장할 수 있으므로, 필요할 때마다 서버에 요청할 필요가 없습니다. 미래. 드롭다운 상자를 채우기 위해 데이터 사전을 많이 사용하는 페이지의 경우 이 접근 방식을 사용하면 서버 방문을 크게 줄일 수 있습니다. 이 방법은 iframe을 사용하는 프레임에 특히 효과적입니다.

이 글은 JS가 프론트엔드 캐싱을 구현하는 방법을 주로 소개합니다. 관심 있는 친구들이 참고하면 좋을 것 같습니다.

구체적인 구현 아이디어 및 방법:

cache.js 파일 만들기:

1. 프런트 엔드 페이지에서 프런트 엔드 캐시에서 한 번에 가져와야 하는 데이터를 정의하고 이를 저장하는 개체를 정의합니다. data: 프런트 엔드 페이지인

/**
 * 定义需要在用户登录的时候获取到本地的数据字典类别
 */
var clsCodes = {clsCodes :
    [BOOL,
     STATUS,
     USER_TYPE,
     REPORT_STATUS
   ]
};
 
/**
 * 获取数据字典到本地
 */
var dicts;

2 는 백엔드 인터페이스를 호출하여 데이터를 얻은 다음 이를 로컬 캐시 개체(dicts)에 저장하는 함수를 정의합니다.

function getDicts() {
  $.post(getContextPath() + /api/sys/getDictList,
      clsCodes,
      function(resultBean, status, xhRequest) {
        if (resultBean.data != undefined) {
          dicts = resultBean.data;
        }
      }, 
      &#39;json&#39;);
}

메인 페이지가 로드될 때 이 메소드를 호출하면 데이터를 한 번에 얻어서 캐시할 수 있습니다. 이런 방식으로 나중에 동일한 데이터가 필요할 경우 로컬 개체 사전에서 직접 가져올 수 있습니다.

백엔드 컨트롤러:

3. 프런트엔드 요청에 따라 데이터베이스를 쿼리(또는 아래 예와 같이 서버 캐시를 쿼리)하여 데이터를 가져와 프런트엔드로 반환하는 인터페이스를 정의합니다.

/**
 * 根据多个分类编号获取多个字典集合
 * @param clsCodes
 * @return {{clsCode : {code1:name1,code2:name2...}}, ...}
 */
@SuppressWarnings({ unchecked, rawtypes })
@ResponseBody
@RequestMapping(getDictList)
public ResultBean getDictList(@RequestParam(value = clsCodes[], required = true) String[] clsCodes) {
  ResultBean rb = new ResultBean();
   
  Map<string, string="">> dictCache = (Map<string, string="">>) CacheManager.getInstance().get(CacheConstants.DICT);
  Map dictMap = new LinkedHashMap<>(); //使用LinkedHashMap保证顺序
 
  if(dictCache != null){
    for(String clsCode: clsCodes){
      dictMap.put(clsCode, dictCache.get(clsCode));
    }
  }else{
    rb.setMessage(缓存中拿不到字典信息！);
    rb.setSuccess(false);
  }
 
  rb.setData(dictMap);
  return rb;
}</string,></string,>

1. 쿠키의 특징

1) 쿠키의 크기는 4KB로 제한되어 있으며 대용량 파일이나 이메일 등 대용량 데이터는 수용할 수 없습니다.

2) 쿠키와 관련된 요청이 있는 한, 쿠키는 서버와 브라우저 사이를 오가며 전송됩니다(로컬 파일이 쿠키를 테스트할 수 없는 이유가 설명됩니다). 또한 쿠키 데이터는 항상 동일한 출처의 http 요청에 포함되어(필요하지 않더라도) 쿠키가 너무 클 수 없는 중요한 이유이기도 합니다. 정통 쿠키 배포는 HTTP 프로토콜을 확장하여 수행됩니다. 서버는 지침에 따라 해당 쿠키를 생성하도록 브라우저에 메시지를 표시하는 특수 지침 줄을 HTTP 응답 헤더에 추가합니다.

3) 사용자가 서버 데이터를 요청할 때마다 이러한 요청과 함께 쿠키가 서버로 전송됩니다. PHP와 같은 서버 스크립트 언어는 쿠키가 보낸 데이터를 처리할 수 있어 매우 편리하다고 할 수 있습니다. 물론 프론트엔드에서도 쿠키를 생성할 수 있습니다. js를 사용하여 쿠키를 조작하는 것은 상당히 번거로운 일입니다. 브라우저는 document.cookie와 같은 객체만 제공하며, 쿠키를 할당하고 얻는 것은 더 번거롭습니다. PHP에서는 setcookie()를 통해 쿠키를 설정하고 슈퍼 전역 배열인 $_COOKIE를 통해 쿠키를 얻을 수 있습니다.

쿠키의 내용에는 주로 이름, 값, 만료 시간, 경로 및 도메인이 포함됩니다. 경로와 도메인이 함께 쿠키의 범위를 구성합니다. 만료 시간이 설정되지 않으면 이 쿠키의 수명은 브라우저 세션 동안이라는 의미이며, 브라우저 창이 닫히면 쿠키가 사라집니다. 브라우저 세션 동안 지속되는 이러한 유형의 쿠키를 세션 쿠키라고 합니다. 세션 쿠키는 일반적으로 하드 디스크에 저장되지 않고 메모리에 저장됩니다. 물론 이 동작은 사양에 의해 지정되지 않습니다. 만료 시간이 설정되면 브라우저는 쿠키를 하드 디스크에 저장합니다. 브라우저를 닫았다가 다시 열면 해당 쿠키는 설정된 만료 시간이 초과될 때까지 계속 유효합니다. 하드 드라이브에 저장된 쿠키는 두 개의 IE 창과 같은 서로 다른 브라우저 프로세스 간에 공유될 수 있습니다. 브라우저마다 메모리에 저장된 쿠키를 처리하는 방법이 다릅니다.

JS 프론트엔드 캐시 구현 방법 및 쿠키의 특징 소개

관련 기사