本地存储是HTML5中提出来的概念,分localStorage和sessionStorage。通过本地存储,web应用程序能够在用户浏览器中对数据进行本地的存储。与 cookie 不同,存储限制要大得多(至少5MB),并且信息不会被传输到服务器。

什么时候用本地存储?

  跨期:不同时间打开页面,比如这次登录需要用到上次登录时保存的数据。

  跨页:在同一个浏览器打开同域的多个标签页,它们之间需要互通数据。

选用哪种存储方式?

  最简单的数据保存方式就是在js里定义变量并赋值,这不属于本地存储的范畴,但大多数情况下这样做就够了。

  cookie的适用场景:数据量小;数据需要随http请求传递到服务端;存储有具体时限的数据;低版本浏览器,不支持localStorage和sessionStorage时。

  localStorage的使用场景:数据大于4k;需要跨标签页使用数据;长期存储数据;

  sessionStorage的适用场景:数据只在本次会话有效;数据仅在当前标签页有效。sessionStorage对比直接js赋值变量的优势,是可以在同页面跨iframe使用。

  浏览器自身会缓存img、js、css等数据,localStorage也可以起到类似作用。

整理本地存储方法

  基于localStorage制作一个本地存储插件storage.js,针对只能存字符串、不能设置时限等进行补充,设想:

  • 在不支持localStorage时自动使用cookie
  • 类型转换,可存储数字、布尔、对象等
  • 可设置时限,超时就自我删除
  • 附带整理cookie方法

  用法展示:

    /** setItem( key, value, time)
* key: 键名,字符串
* value:键值,可以是Stirng/Boolean/Number/Object等类型
* time: 超时时间,非必填,数字型(单位毫秒)。默认长期有效。
**/
storage.setItem("text", "this is string");
storage.setItem("money", 1234);
storage.setItem("person", {name: "Jone"}, 24*60*60*1000); // getItem 获取值
storage.getItem("money"); //返回数字类型的值1234 // removeItem 删除某数据
storage.removeItem("money"); // clear 清除所有数据
storage.clear(); // 类似方法,操作cookie,只限于存储字符串
storage.setCookie("mycookie", "this is string", 60*60*24*30);
storage.getCookie("mycookie");
storage.removeCookie("mycookie");
storage.clearCookie();

  storage.js :

(function(window) {
var storage = {}; // 是否支持localStorage
if (!window.localStorage) {
storage.support = false;
} else {
storage.support = true;
} // time为超时时间(单位毫秒),非必填
storage.setItem = function(key, value, time) {
if (this.support) {
if (typeof key != "string") {
console.log("*STORAGE ERROR* key必须是字符串");
return;
}
if (time) {
if (typeof time != "number") {
console.log("*STORAGE ERROR* time必须是数字");
return;
} else {
time = parseInt(time) + (new Date()).getTime();
}
} else {
time = null;
}
var setValue = {
value: JSON.stringify(value),
time: time
}
localStorage.setItem(key, JSON.stringify(setValue));
} else {
storage.setCookie(key, value, time)
}
}; // 不存在的值会返回null
storage.getItem = function(key) {
if (this.support) {
var getValue = JSON.parse(localStorage.getItem(key));
if (!getValue) {
return null;
}
if (getValue.time && getValue.time < (new Date()).getTime()) {
localStorage.removeItem(key);
return null;
} else {
return JSON.parse(getValue.value)
}
} else {
storage.getCookie(key)
}
}; // 移除某个值
storage.removeItem = function(key) {
if (this.support) {
localStorage.removeItem(key);
} else {
storage.removeCookie(key)
}
};
// 清空存储
storage.clear = function() {
if (this.support) {
localStorage.clear();
} else {
storage.clearCookie();
}
}; /**** cookie方法 ****/
storage.setCookie = function(key, value, time) {
if (typeof key != "string") {
console.log("*STORAGE ERROR* key必须是字符串");
return;
} else {
if (typeof time != "number") {
// cookie默认存365天
time = 365 * 24 * 60 * 60 * 1000;
}
var d = new Date();
d.setTime(d.getTime() + time);
document.cookie = key + "=" + value + "; expires=" + d.toGMTString();
}
};
storage.getCookie = function(key) {
var cookies = document.cookie.split(";")
var cookieValue;
for (var i = 0; i < cookies.length; i++) {
if (key == cookies[i].split("=")[0]) {
cookieValue = cookies[i].split("=")[1];
break;
}
}
return cookieValue;
};
storage.removeCookie = function(key) {
document.cookie = key + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
};
storage.clearCookie = function() {
var cookies = document.cookie.split(";")
for (var i = 0; i < cookies.length; i++) {
document.cookie = cookies[i].split("=")[0] + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
}
}; window.storage = storage;
})(window)

  

localStorage/cookie 用法分析与简单封装的更多相关文章

  1. jquery.cookie用法详细解析,封装的操作cookie的库有jquery.cookie.js

    jquery.cookie用法详细解析 需要注意存入cookie前,对数据进行序列化, 得到后在反序列化: 熟练运用:JSON.stringify();和JSON.parse(): 通常分为如下几个步 ...

  2. Android AsyncTask 深度理解、简单封装、任务队列分析、自定义线程池

    前言:由于最近在做SDK的功能,需要设计线程池.看了很多资料不知道从何开始着手,突然发现了AsyncTask有对线程池的封装,so,就拿它开刀,本文将从AsyncTask的基本用法,到简单的封装,再到 ...

  3. 面localStorage用作数据缓存的简易封装

    面localStorage用作数据缓存的简易封装 最近做了一些前端控件的封装,需要用到数据本地存储,开始采用cookie,发现很容易就超过了cookie的容量限制,于是改用localStorage,但 ...

  4. 孟老板 BaseAdapter封装 (一) 简单封装

    BaseAdapter封装(一) 简单封装 BaseAdapter封装(二) Header,footer BaseAdapter封装(三) 空数据占位图 BaseAdapter封装(四) PageHe ...

  5. sessionStorage & localStorage & cookie

    sessionStorage & localStorage & cookie 概念 html5中的Web Storage包括了两种存储方式:sessionStorage和localSt ...

  6. python网页请求urllib2模块简单封装代码

    这篇文章主要分享一个python网页请求模块urllib2模块的简单封装代码. 原文转自:http://www.jbxue.com/article/16585.html 对python网页请求模块ur ...

  7. 对pymysql的简单封装

    #coding=utf-8 #!/usr/bin/python import pymysql class MYSQL: """ 对pymysql的简单封装 "& ...

  8. python笔记之常用模块用法分析

    python笔记之常用模块用法分析 内置模块(不用import就可以直接使用) 常用内置函数 help(obj) 在线帮助, obj可是任何类型 callable(obj) 查看一个obj是不是可以像 ...

  9. sessionStorage和localStorage的用法,不同点和相同点

    一,共同点 (1)存储时用setItem: localStorage.setItem("key","value");//以"key"为名称存 ...

随机推荐

  1. nc命令简介

    nc介绍 ncat/nc 既是一个端口扫描工具,也是一款安全工具,还能是一款监测工具,甚至可以做为一个简单的 TCP 代理. 在大多数 Debian 发行版中,nc 是默认可用的,它会在安装系统的过程 ...

  2. Linux机器之间复制文件和目录方式&Linux的scp命令详解

    本文转载于:http://www.cnblogs.com/hitwtx/archive/2011/11/16/2251254.html 整理总结如下: 不同的Linux之间copy文件常用有3种方法: ...

  3. android开发学习——day2

    简单了解了android stdio的操作方式,今天着手于探究活动(Activity) 了解了基本活动与手动创建活动的方法,了解了onCreate()方法,了解了创建和加载页面布局(layout) 新 ...

  4. Git for Windows之日志查看与版本切换

    1.查看本地版本库的修改日志 (1).通过log指令查看完整日志 (2).通过 log --pretty=oneline查看简易版日志 2.版本切换 (1).切换到本地版本库最新的版本,通过reset ...

  5. 再学Java 之 HashMap的底层实现

    今天参加欢聚时代的面试,我说我自己依靠自己的理解重新实现过HashMap.描述我自己的实现思想后,面试官问“hashmap”底层如果用数组不是效率比较低吗,不是更应该用红黑树吗?我一下子就蒙了.用数组 ...

  6. System.Threading.Tasks.Task 引起的 IIS 应用池崩溃

    接口服务运行一段时间后,IIS应用池就会突然挂掉,事件查看日志,会有事件日志Event ID为5011的错误 为应用程序池“PokeIn”提供服务的进程在与 Windows Process Activ ...

  7. Docker概念学习系列之Docker核心概念之仓库Repository

    不多说,直接上干货! Docker仓库 仓库(Repository)是集中存放镜像的地方,分公共仓库和私有仓库. 仓库是集中存放镜像文件的场所. 有时候会把仓库和仓库注册服务器(Registry)混为 ...

  8. JavaScript -- URL编码

    ----- 010-escape.html ----- <!DOCTYPE html> <html> <head> <meta http-equiv=&quo ...

  9. JAVA WEB 过滤器(Filter)中向容器 Spring 注入 bean

    如果直接使用 @Autoware 获取 bean 会直接使该 bean 为 null,这是因为这种配置过滤器的方法无法在过滤器中使用 Spring bean,因为 Filter 比 bean 先加载, ...

  10. 25. k个一组翻转链表

    题目描述 给出一个链表,每 k 个节点一组进行翻转,并返回翻转后的链表. k 是一个正整数,它的值小于或等于链表的长度.如果节点总数不是 k 的整数倍,那么将最后剩余节点保持原有顺序. 示例 : 给定 ...