使用localStorage替代cookie做本地存储

因为cookie存储有限，加上cookie每次都要上传到服务器，浪费了带宽不说，而且伤害了人民群众的感情。

基于HTML5的localStorage可能能给你带的新的希望，而且最大支持不超过5MB的数据存储。可惜的是，IE方面只支持IE8以上的版本。

我花了一点时间就最近浏览记录的存储简单的写了一个javascript代码来做演示

late = {
  storage : {},
  isinit : 0,
  maxnum : 10,
  key : 'vestigial',
  _init:function(){
    if (late.isinit === 1) {
      return true;
    } else if (late.isinit === 0 && window.localStorage) {
      late.isinit = 1;
      late.storage = window.localStorage;
      return true;
    } else {
      return false;
    }
  },

  get:function(){
    if(late._init()){
      var data = late.storage.getItem(late.key);
      return JSON.parse(data);
    }else{
      return false;
    }
  },

  set:function(value){
    if(late._init()){
      var data = late.storage.getItem(late.key);
      data = JSON.parse(data);
      if(data === null){
        data = [];
      }
      if (data.length === 10) {
        data.shift();
      }
      data.push(value);
      data = JSON.stringify(data);
      late.storage.setItem(late.key, data);
      return true;
    }else{
      return false;
    }
  }
};

var obj = {
    id:2,
    title:'标题1',
    url:'http://www.baidu.com'
  };
late.set(obj);
var each = late.get();
var eachlength = each.length;
for(i=0; i<eachlength; i++){
  document.writeln(JSON.stringify(each[i]));
}

实在不行的话还可以使用flash来存储，不建议使用cookie。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法

    前言:cookie,localStorage和sessionStorage都是浏览器本地存储数据的地方,其用法不尽相同:总结一下基本的用法. 一.cookie 定义: 存储在本地,容量最大4k,在同源的http请求时携带传递,损耗带宽: 可设置访问路径,只有此路径及此路径的子路径才能访问此cookie,存在有效的时间. 注意点: cookie的访问需要服务器环境,直接在本地文件访问无效: cookie的访问和设置需要导入jquery.cookie.js文件: 浏览器对每一个访问的地址下可添加的c

  • JS实现本地存储信息的方法(基于localStorage与userData)

    本文实例讲述了JS实现本地存储信息的方法.分享给大家供大家参考,具体如下: WEB应用的快速发展,是的本地存储一些数据也成为一种重要的需求,实现的方案也有很多,最普通的就是cookie了,大家也经常都用,但是cookie的缺点是显而易见的,其他的方案比如:IE6以上的userData,Firefox下面的globalStorage,以及Flash的本地存储,除了Flash之外,其他的几个都有一些兼容性的问题. sessionStorage与localStorage Web Storage实际上由

  • AngularJS之ionic 框架下实现 Localstorage本地存储

    AngularJS之ionic 框架下实现 Localstorage本地存储

    前言: 我们前台用的是ionic+AngularJS,做的是混合模式移动应用.最近有一个需求是,我在页面A上面滑动的时候,跳入页面B,页面B需要加载页面A的数据,这样的页面传值如何实现呢?那就需要用到LocalStorage本地存储了. Ionic Ionic是目前最有潜力的一款HTML5手机应用开发框架.通过SASS构架应用程序,他提供了很多UI控件来帮助开发者开发强大的应用.加上angularjs可以让ionic应用体验度增强.代码也非常简单.angularjs可以提供数据的双向绑定,使用它

  • 本地存储localStorage用法详解

    一.什么是localStorage? 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同. 二.localStorage的优势与局限 localStorage的优势 1.localStorage拓展了cookie的4K限制 2.localStorage会可

  • 使用localStorage替代cookie做本地存储

    使用localStorage替代cookie做本地存储

    因为cookie存储有限,加上cookie每次都要上传到服务器,浪费了带宽不说,而且伤害了人民群众的感情. 基于HTML5的localStorage可能能给你带的新的希望,而且最大支持不超过5MB的数据存储.可惜的是,IE方面只支持IE8以上的版本. 我花了一点时间就最近浏览记录的存储简单的写了一个javascript代码来做演示 late = { storage : {}, isinit : 0, maxnum : 10, key : 'vestigial', _init:function()

  • JavaScript中本地存储(LocalStorage)和会话存储(SessionStorage)的使用

    JavaScript中本地存储(LocalStorage)和会话存储(SessionStorage)的使用

    目录 前提知识 范例 示例1:将键值对提供给本地存储 示例2: 本地存储中设置键值对 示例3: 获取空值 示例 4:将数组存储在本地存储中 示例 5:从本地存储中获取数组 示例 6:从本地存储中获取数组? 示例 7:清除本地存储 示例 8:仅从本地存储中删除 Name1 键值对 会话存储 总结 我不会告诉你任何定义和概念,上车,读完这篇博客,你就会对本地存储(Local Storage) 和 会话存储(Session Storage)有一个清晰的认识. 前提知识 请按照我以下的步骤来: 1.在任

  • HTML5 WebStorage(HTML5本地存储技术)

    HTML5 WebStorage(HTML5本地存储技术)

    WebStorage是HTML5中本地存储的解决方案之一,在HTML5的WebStorage概念引入之前除去IE User Data.Flash Cookie.Google Gears等看名字就不靠谱的解决方案,浏览器兼容的本地存储方案只有使用cookie.有同学可能会问,既然有了cookie本地存储,为什么还要引入WebStorage的概念? Cookie肿么了 cookie的缺陷是非常明显的 1. 数据大小:作为存储容器,cookie的大小限制在4KB左右这是非常坑爹的,尤其对于现在复杂的业

  • Vue 浏览器本地存储的问题小结

    Vue 浏览器本地存储的问题小结

    目录 localstorage SessionStorage 总结 TodoList 改为本地存储 localstorage <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浏览器本地存储</title> </head> <body> <div id="root&q

  • Vue 插件及浏览器本地存储

    Vue 插件及浏览器本地存储

    目录 插件 localstorage SessionStorage 总结 TodoList 改为本地存储 插件 功能:插件通常用来为 Vue 添加全局功能 本质:包含 install 方法的一个对象,install 的第一个参数是 Vue,第二个以后的参数是插件使用者传递的数据 定义插件:vue官网是这样描述的:Vue.js 的插件应该暴露一个 install 方法.这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象 对象.install = function(Vue,opt

  • 本地存储localStorage设置过期时间示例详解

    目录 思考 实现思路 代码实现 代码测试 思考 在我们使用cookie的时候是可以设置有效期的,但是localStorage本身是没有该机制的,只能人为的手动删除,否则会一直存放在浏览器当中,可不可以跟cookie一样设置一个有效期.如果一直存放在浏览器又感觉有点浪费,那我们可以把localStorage进行二次封装实现该方案. 实现思路 在存储的时候设置一个过期时间,并且存储的数据进行格式化方便统一校验,在读取的时候获取当前时间进行判断是否过期,如果过期进行删除即可. 代码实现 目录结构 en

随机推荐