JavaScript localStorage

存储时间

• localStorage（IE8 以下不兼容）

  • 永久存储
  • 最大存储 5M 客户端的微型数据库
  • 只能存储 string

• cookie

  • 可以设置过期时间
  • 最大存 4KB
  • 每一个域名下面最多可以存储 50 条数据
  • sessionStorage（结合后台使用、关闭窗口存储的数据清空）

localStorage 对象

复制// 设置键 值
localStorage.setItem("key","value");// 设置键，值（必须 json 字符串）
localStorage.key="value";

// 获取对应键值
localStorage.getItem("key");
localStorage.key;

// 删除键值
localStorage.removeItem(name); // 删除对应键
localstorage.clear(); // 清除所有
js

JavaScript sessionStorage

• 常用于后台服务端控制前端存储数据
• 或用户登录信息，但与 localstore 主要不同的是只在会话期间有效

复制// 设置键 值
sessionStorage.setItem("key","value");
sessionStorage.key="value";

// 获取对应键值
变量=sessionStorage.getItem("key");
变量=sessionStorage.key;

// 删除键值
sessionStorage.removeItem(name); // 删除对应键
sessionStorage.clear()

js

JavaScript cookie

存储格式

复制name=value;[expires=date];[path=path];[domain=somewhere.com];[secure]，
js

键 = 值; 后续中括号的内容，都是可选项。

火狐支持缓存 cookie，谷歌只支持服务器缓存 cookie

• [expires=date]：‘expires=过期时间’
• [path=path]：设置的cookie的路径
  • 如果不设置，默认是加载当前.html文件的路径
  • 设置的cookie的路径，和加载当前文件的路径，必须一致，如果不一致，cookie 访问失败。

复制'username=xxx;path=' + '/code14/cookie'; // 可以访问当前与html同一路径
'username=xxx;path=' + '/code14/cookie/111';// 设置其他路径后 不能访问
js

• [domain=somewhere.com]：domain 限制访问域名
  • 如果不去设置，默认是加载当前 .html 文件的服务器域名 /ip
  • 如果加载当前文件域名和设置的域名不一致，设置 cookie 失败。不能设置

复制document.cookie = 'username=xxx;domain=' + 'localhostxxx'; // 设置失败
js

• secure
  • 如果不设置，设置 cookie，可以通过 http/https 协议加载文件设置
  • 设置字段后，只能 https 协议加载 cookie.

复制document.cookie = 'username=xxx;secure'
js

获取cookie

复制document.cookie
js

设置cookie

复制document.cookie = 'username=xxx';
js

转码储存

复制encodeURIComponent()：将中文编译成对应的字符
decodeURIComponent()：将对应的字符编译成中文
document.cookie = 'username=' + encodeURIComponent("蜘蛛侠");
js

转码获取

复制decodeURIComponent(document.cookie)
js

删除cookie

复制document.cookie = "username=;expires=" + new Date(0);
js

setCookie 封装

复制function setCookie(name,value,{expires,path,domain,secure}){
  var str = encodeURIComponent(name) + "=" + encodeURIComponent(value);
  if(expires) str += ";expires=" + afterOfDate(expires);
  if(path) str += ";path=" + path;
  if(domain) str += ";domain=" + domain;
  if(secure) str += ";secure";
  document.cookie = str;
}

// 获取n天后的时间
function afterOfDate(n){
  var date = new Date();
  var day = date.getDate();
  date.setDate(n + day);
  return date;
}
js

getCookie 封装

复制// n121=sa; 名字=name; 名字2=2name

function getCookie(name){
  var cookieStr = decodeURIComponent(document.cookie);
  var strat = cookieStr.indexOf(" " + name + "=");
  if(strat == "-1"){
​    return null;
  }else{
​    var end = cookieStr.indexOf(";",strat);
​    if(end == "-1"){
​      end = cookieStr.length;
​    }
​    var str = cookieStr.substring(strat,end);
​    return str.split("=")[1];
  }
}

getCookie("名字2")
js

removeCookie 封装

复制function removeCookie(name){
  document.cookie = encodeURIComponent(name) + "=;expires=" + new Date(0);
}
js

cookie 封装

复制/* 
  $cookie()
  一个参数       获取
  两个参数或以上    设置
  两个参数，参数二 null 删除
 */

function $cookie(){
  switch (arguments.length){
​    case 1 : 
​      return getCookie(arguments[0]);
​    case 2 :
​      if(arguments[1] == null){
​        removeCookie(arguments[0]);
​      }else{
​        setCookie(arguments[0],arguments[1],{});
​      }
​      break;
​    default:
​      setCookie(arguments[0],arguments[1],arguments[3]);
​      break;
  }
}

function setCookie(name,value,{expires,path,domain,secure}){
  var str = encodeURIComponent(name) + "=" + encodeURIComponent(value);
  if(expires) str += ";expires=" + afterOfDate(expires);
  if(path) str += ";path=" + path;
  if(domain) str += ";domain=" + domain;
  if(secure) str += ";secure";
  document.cookie = str;
}

function afterOfDate(n){
  var date = new Date();
  var day = date.getDate();
  date.setDate(n + day);
  return date;
}
function getCookie(name){
  var cookieStr = decodeURIComponent(document.cookie);
  var strat = cookieStr.indexOf(" " + name + "=");
  if(strat == "-1"){
​    return null;
  }else{
​    var end = cookieStr.indexOf(";",strat);
​    if(end == "-1"){
​      end = cookieStr.length;
​    }
​    var str = cookieStr.substring(strat,end);
​    return str.split("=")[1];
  }
}
function removeCookie(name){
  document.cookie = encodeURIComponent(name) + "=;expires=" + new Date(0);
}
js