localStorage sessionStorage

localStorage

• 使用 localStorage 创建一个本地存储的 name/value 对

  // 存储
  localStorage.setItem("lastname", "Smith");
  // 检索
  document.getElementById("result").innerHTML = localStorage.getItem("lastname");
  

• 保存时间

  localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。

  localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。

  localStorage 属性是只读的。

  localStorage 只支持 string 类型的存储。

• 语法

  保存数据语法：
  localStorage.setItem("key", "value");
  读取数据语法：
  var lastname = localStorage.getItem("key");
  删除数据语法：
  localStorage.removeItem("key");
  

sessionStorage

• 使用 sessionStorage 创建一个本地存储的 name/value 对

  // 存储
  sessionStorage.setItem("lastname", "Smith");
  // 检索
  sessionStorage.getItem("lastname");
  

• 保存时间

  sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

• 语法

  保存数据语法：
  
  sessionStorage.setItem("key", "value");
  读取数据语法：
  
  var lastname = sessionStorage.getItem("key");
  删除指定键的数据语法：
  
  sessionStorage.removeItem("key");
  删除所有数据：
  
  sessionStorage.clear();
  

数据加密

• atob，btoa

  btoa() 不支持中文

  //btoa从 String 对象中创建一个 base-64 编码的 ASCII 字符串，其中字符串中的每个字符都被视为一个二进制数据字节。
  //一个字符串, 其字符分别表示要编码为 ASCII 的二进制数据的单个字节。
  
  let encodedData = window.btoa('111ddddd'); //"MTExZGRkZGQ="
  
  //返回值一个包含 stringToEncode 的 Base64 表示的字符串。
  
  //对经过 base-64 编码的字符串进行解码。
  //你可以使用 window.btoa() 方法来编码一个可能在传输过程中出现问题的数据，
  //并且在接受数据之后，使用 atob() 方法再将数据解码。
  //例如：你可以编码、传输和解码操作各种字符，比如 0-31 的 ASCII 码值。
  
  //如果传入字符串不是有效的 base64 字符串，比如其长度不是 4 的倍数，则抛出 DOMException。
  
  try{
  	let decodedData = scope.atob('MTExZGRkZGQ='); //111ddddd
  }
  
  

• encodeURIComponent，decodeURIComponent

  支持对中文进行加密

  /原字串作为URI组成部分被被编码后的新字符串。
  encodeURIComponent('你好 你是JavaScript')//"%E4%BD%A0%E5%A5%BD%20%E4%BD%A0%E6%98%AFJavaScript"
  //一个解码后的统一资源标识符（URI）字符串，处理前的URI经过了给定格式的编码。
  
  try{
  decodeURIComponent("%E4%BD%A0%E5%A5%BD%20%E4%BD%A0%E6%98%AFJavaScript") //"你好 你是JavaScript"
  }
  

• 二者混和加密

  let set = encodeURIComponent('李四'),result = btoa(set); // %E6%9D%8E%E5%9B%9B
  1
  let jieMi = atob('%E6%9D%8E%E5%9B%9B'), jieM = decodeURIComponent(jieMi); //李四