AngularJS 진급(15) Cookie'data'possibly not set or overflowed because it was too large

3156 단어 AngularJScookieStore

Cookie 'data' possibly not set or overflowed


 because it was too large (5287 > 4096 bytes)!


주:여기를 클릭하여 충전하세요!

이야기의 기원


프로젝트 개발 과정에서 상기 문제에 부딪히면 처음에는 경고인 줄 알고 별로 개의치 않았다.나중에 프로그램의 실행 효과에 직접적인 영향을 미쳤다는 것을 발견했다.과감하게 해결책을 찾다.

문제 분석


Chrome 브라우저 정보에 따라 다음 코드에 오류가 있음을 표시합니다.
$cookieStore.get("data")
자신이 프로그램에서 cookie Store를 사용하여 대량의 필요한 데이터를 저장했기 때문에 그 데이터량은 cookie가 기본적으로 설정한 저장값 4K를 초과하여 오류가 발생할 수 있습니다.
인스턴트로 바꿔봐.문제 해결, 실천 증명: instance가 쿠키 스토어보다 낫다.

꼬치꼬치 캐묻다


1.cokieStore 는 기본적으로 몇 개의 데이터를 저장합니까?기본 스토리지 데이터를 변경할 수 있습니까?
인터넷 조회를 통해 명확한 답을 얻지 못했지만 힌트를 통해 알 수 있듯이 저장 가능한 데이터 공간은 4K이고 제공하는 방법은put,get,remove 세 가지밖에 없기 때문에 기본 저장 데이터 공간을 바꾸는 것은 비현실적인 일이라는 것을 알 수 있다.
2. cookie Store에서 데이터를 얻은 후 시스템이 스스로 저장 공간을 방출해야 합니까? 아니면 수동으로 방출해야 합니까?자바와 유사한 쓰레기 회수 메커니즘 아닙니까?
직감적으로 쿠키 스토어는 자바의 쓰레기 회수 메커니즘과 유사해야 한다. 인공 인코딩이 없어도 쿠키 스토어가 차지하는 저장 공간을 방출하지 않아도 시스템은 생명주기가 끝난 후에 저장 공간을 방출한다.모범 사례는 cookie Store에서 필요한 데이터를 추출하고 더 이상 cookie Store가 필요하지 않을 때 그들이 차지하는 메모리 공간을 방출하는 것이다.그래야 합리적인 디자인이지.
3. cookieStore와 instance의 차이점은?
상기에서 분석한 바와 같이 메모리 점용의 측면에서 보면 쿠키 스토어에 저장된 데이터는 메모리에 넣고 실제 메모리 공간을 차지한다.한편, instance는 바늘과 유사하다. 단지 하나의 대상 주소를 가리키고 그 대상은 임의의 내용, 형식, 크기의 데이터를 저장할 수 있으며 메모리의 제한을 받지 않는다.
주:instance에 대한 자세한 내용은 여기를 클릭하세요.

첨부: 단계 사용


AngularJS는 $cookie와 $cookieStore API를 제공하여 cookies를 처리할 수 있습니다. 
이 두 서비스 모두 HTML5 cookies를 잘 발휘할 수 있습니다. HTML5 API가 사용할 수 있을 때 브라우저는 HTML5가 제공하는 API를 사용하고 사용할 수 없으면 기본적으로document을 선택합니다.cookies.그런 방식을 막론하고, 너는 같은 API를 사용하여 일을 진행할 수 있다.

Step 1 - include cookies module


첫 번째 단계는 JS 파일을 로드하고 cookie module에 의존합니다.

<script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.9/angular-cookies.min.js"></script>

angular module 만들기

    var DemoApp = angular.module( 'DemoApp', ['ngCookies'] ).config( demoConfig );

Step 2 - Inject into controller


cookie module를 controller에 주입
DemoApp.controller('DemoController', function($cookieStore, $scope, $location, $routeParams, $http , $timeout ){ .. body here .. })

Step 3 - Using the $cookieStore


현재put,get,remove 방법으로 쿠키를 조작할 수 있습니다. $쿠키 Store는 대상을 쿠키에 직접 저장할 수 있습니다. 이것은angularjs의 toJson/fromJson을 사용하여 자동으로 서열화되고 반서열화됩니다.
$cookieStore.put("name","my name");
$cookieStore.get("name") == "my name";
$cookieStore.remove("name");
$cookieStore.put("persion", {
            name: "my name",
            age: 18
});
$scope.person = $cookieStore.get("persion");

Step 4 - Using the $cookie

DemoApp.controller('DemoController', function ($cookies, $scope) {
        $cookies.myFavorite = 'oatmeal haha';
})  

좋은 웹페이지 즐겨찾기