本地存储是 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)
来源: https://www.cnblogs.com/yangshifu/p/9301388.html