使用localStorage替代cookie做本地存储


Posted in Javascript onSeptember 25, 2019

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

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

使用localStorage替代cookie做本地存储

我花了一点时间就最近浏览记录的存储简单的写了一个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。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 拾漏补遗
Dec 27 Javascript
javascript innerText和innerHtml应用
Jan 28 Javascript
原生javascript实现的分页插件pagenav
Aug 28 Javascript
jQuery中:contains选择器用法实例
Dec 30 Javascript
跟我学习javascript的函数调用和构造函数调用
Nov 16 Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
Feb 15 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
JavaScript使用localStorage存储数据
Sep 25 #Javascript
Vue路由守卫之路由独享守卫
Sep 25 #Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
Sep 25 #Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 #Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 #Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 #Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
Sep 25 #Javascript
You might like
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
setTimeout函数兼容各主流浏览器运行执行效果实例
2013/06/13 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
2013/10/29 Javascript
setInterval与clearInterval的使用示例代码
2014/01/28 Javascript
js的2种继承方式详解
2014/03/04 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
Javascript之深入浅出prototype
2017/02/06 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
JavaScript输入框字数实时统计更新
2017/06/17 Javascript
Swiper实现轮播图效果
2017/07/03 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
Node.js系列之发起get/post请求(2)
2019/08/30 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
在Django的上下文中设置变量的方法
2015/07/20 Python
python生成器表达式和列表解析
2016/03/10 Python
Python中的数学运算操作符使用进阶
2016/06/20 Python
python输入错误密码用户锁定实现方法
2017/11/27 Python
python实现logistic分类算法代码
2020/02/28 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
美国受信赖的教育产品供应商:Nest Learning
2018/06/14 全球购物
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
秋季运动会广播稿
2014/02/22 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
导游词之天津盘山
2019/11/01 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers
基于Python实现一个春节倒计时脚本
2022/01/22 Python
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js