Cookie 'data' possibly not set or overflowed

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

故事起源

项目开发过程中遇到以上问题,刚开始以为只是个警告,没太在意。后来发现直接影响到了程序的执行效果。果断寻找解决方法。

问题分析

根据Chrome浏览器信息定位,显示以下代码存在错误:

$cookieStore.get("data")

由于自己在程序使用cookieStore存储了大量所需数据,其数据量超过了cookie默认设定的存储值4K,故会报错。

换用instance试试。问题成功解决,实践证明:instance比cookieStore好用。

刨根问底

1.cookieStore默认存储多少数据?可否更改默认存储数据?

经过网络查询也没能获得明确答案,不过从提示可以看出,其可存储数据空间就是4K,而且其提供的方法只有put、get、remove三种,故得知更改其默认存储数据空间是不现实的事情。

2.从cookieStore获取数据后,系统自己释放存储空间,还是必须得手动释放?是不是类似于java的垃圾回收机制?

凭借直觉,cookieStore应该类似于java的垃圾回收机制,就算没有人工编码实现释放cookieStore所占用的存储空间,系统也会在其生命周期结束后释放其存储空间。最佳实践是:当从cookieStore中取出所需数据,不再需要cookieStore时,应收到释放其所占用的内存空间。这样才是合理的设计。

3.cookieStore与instance的区别?

如上述所分析,从内存占用的角度考虑,cookieStore中存储的数据置于内存之中,实实际际的占用内存空间。而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方法操作 cookie , $cookieStore 可以直接存储对象到cookie中,它会使用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';
})  

AngularJS进阶(十五)Cookie 'data' possibly not set or overflowed because it was too large的更多相关文章

  1. J2EE进阶(十五)MyEclipse反向工程实现从数据库反向生成实体类之Hibernate方式

    J2EE进阶(十五)MyEclipse反向工程实现从数据库反向生成实体类之Hibernate方式   反向工程又称逆向工程.   开发项目涉及到的表太多,一个一个的写JAVA实体类很是费事.MyEcl ...

  2. Python进阶(十五)----面向对象之~继承(单继承,多继承MRO算法)

    Python进阶(十五)----面向对象之~继承 一丶面向对象的三大特性:封装,继承,多态 二丶什么是继承 # 什么是继承 # b 继承 a ,b是a的子类 派生类 , a是b的超类 基类 父类 # ...

  3. AngularJS学习之旅—AngularJS 模块(十五)

    一.AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 1.创建模块 通过 AngularJS 的 angular ...

  4. AngularJS进阶(十二)AngularJS常用知识汇总(不断更新中....)

    AngularJS常用知识汇总(不断更新中....) 注:请点击此处进行充电! app.controller('editCtrl',['$http','$location','$rootScope', ...

  5. AngularJS进阶(十九)在AngularJS应用中集成百度地图实现定位功能

    在AngularJS应用中集成百度地图实现定位功能 注:请点击此处进行充电! 前言 根据项目需求,需要实现手机定位功能,考虑到百度业务的强大能力,遂决定使用百度地图第三方服务. 添加第三方模块的步骤与 ...

  6. AngularJS进阶(十八)在AngularJS应用中集成科大讯飞语音输入功能

    在AngularJS应用中集成科大讯飞语音输入功能 注:请点击此处进行充电! 前言 根据项目需求,需要在首页搜索框中添加语音输入功能,考虑到科大讯飞语音业务的强大能力,遂决定使用科大讯飞语音输入第三方 ...

  7. AngularJS进阶(十六)脏值检查

    脏值检查 注:请点击此处进行充电! 需求 在项目开发过程中,需要对药店信息进行更改.如下图所示.现在的需求是:当药店信息没有发生变化时,点击"更新信息"按钮,提示"药店信 ...

  8. AngularJS进阶(十四)AngularJS灵异代码事件

    AngularJS灵异代码事件 注:请点击此处进行充电! 事情原委 router_sys.js源代码如下: 自己在html路由跳转的代码如下: 但是在实际路由过程中,却路由到了下面的状态,相应的页面中 ...

  9. AngularJS进阶(十)AngularJS改变元素显示状态

    AngularJS改变元素显示状态 前言 本文描述使用AngularJS提供的ng-show和ng-hide指令实现自动监听某布尔型变量来改变元素显示状态. 控制html元素显示和隐藏有n种方法:ht ...

随机推荐

  1. Windows 10下Markdown不能显示预览

    Windows 10下Markdown不能显示预览 结局办法 下载awesomium的SDK,安装后重启Markdown即可 实测最新版本的SDK不行,建议安装1.6.6 下载地址:http://ww ...

  2. SpringMVC源码分析--文件上传

    SpringMVC提供了文件上传的功能,接下来我们就简单了解一下SpringMVC文件上传的开发及大致过程. 首先需要在springMVC的配置文件中配置文件上传解析器 <bean id=&qu ...

  3. The Zen Programmer

    专注 何为专注 关于 休息 怎么睡觉 心无杂念 我的体会 自我分析 初学者心态 无我 不要设置职业目标 敏事慎言 正念 做自己的老板 玩物养志 结语 最近在研读Christian Grobmeier ...

  4. Memcached - In Action

    Memcached 标签 : Java与NoSQL With Java 比较知名的Java Memcached客户端有三款:Java-Memcached-Client.XMemcached以及Spym ...

  5. 阻塞IO服务器模型之单线程服务器模型

    单线程服务器模型是最简单的一个服务器模型,几乎我们所有程序员在刚开始接触网络编程(不管是B/S结构还是C/S结构)都是从这个简单的模型开始.这种模型只提供同时一个客户端访问,多个客户端访问必须要等到前 ...

  6. Effective C++ ——实现

    条款26:尽可能延后变量定义式的出现时间 当你定义一个变量的时候就要保证这个变量能够在程序中使用到,不要定义无意义的变量,这样就要求我们最好是在变量使用到的时候才做定义,因为如果一个变量定义了却不使用 ...

  7. windows 7、8分区

    如果你的机器一开始安装的是windows7或者8, 一般分配的分区都是主分区.如果你想再搭配个linux操作系统,搞个双系统啥的,可能总是失败.我有血的教训啊. 从源头上可以解决分区问题,就是可以在安 ...

  8. Android之EditText imeOptions属性解析

    在我们的手机中,虽然通常输入法软键盘右下角会是回车按键,但我们经常会看到点击不同的编辑框,输入法软键盘右下角会有不同的图标.例如:  点击浏览器网址栏的时候,输入法软键盘右下角会变成"GO& ...

  9. [ExtJS5学习笔记]第五节 使用fontawesome给你的extjs5应用增加字体图标

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/38458411本文作者:sushengmiyan-------------------- ...

  10. 从二进制数据流中构造GDAL可以读取的图像数据(C#)

    在上一篇博客中,讲了一下使用GDAL从文件流中构造一个GDAL可以识别的数据来进行处理.原以为这个接口在C#中没有,仔细看了下GDAL库中源码,发现C#版本也有类似的函数,下面是GDAL库中的一个C# ...