if(window.localStorage){
  alert("瀏覽器支持 localStorage");
} else {
  alert("瀏覽器不支持 localStorage");
}

if(window.localStorage){
  try {
    localStorage.setItem("username", "name");
    alert("瀏覽器支持 localStorage");
  } catch (e) {
    alert("瀏覽器支持 localStorage 后不可使用");
  }
} else {
  alert("瀏覽器不支持 localStorage");
}

localStorage.setItem("username", "name"); // "name"
localStorage.setItem("count", 1); // "1"
localStorage.setItem("isOnline", true); // "true"
sessionStorage.setItem("username", "name");
// user 存儲(chǔ)時(shí)，先使用 JSON 序列化，否則保存的是[object Object]
const user = { "username": "name" };
localStorage.setItem("user", JSON.stringify(user));
sessionStorage.setItem("user", JSON.stringify(user));

const usernameLocal = localStorage.getItem("username");
const usernameSession = sessionStorage.getItem("username");
// 獲取到的數(shù)據(jù)為string，使用時(shí)反序列化數(shù)據(jù)
const userLocal = JSON.parse(localStorage.getItem("user"));
const userSession = JSON.parse(sessionStorage.getItem("user"));

localStorage.removeItem("username");
sessionStorage.removeItem("username");

localStorage.clear();
sessionStorage.clear();

localStorage.hasOwnProperty("userName"); // true
sessionStorage.hasOwnProperty("userName"); // false

Object.keys(localStorage); // ['username']
Object.keys(sessionStorage);

window.addEventListener("storage", () => {
  // 監(jiān)聽(tīng) username 值變化
  if (e.key === "username") {
    console.log("username 舊值：" + e.oldValue + "，新值：" + e.newValue);
  }
})

(() => {
  const originalSetItem = localStorage.setItem;
  // 重寫(xiě) setItem 函數(shù)
  localStorage.setItem = function (key, val) {
    let event = new Event("setItemEvent");
    event.key = key;
    event.newValue = val;
    window.dispatchEvent(event);
    originalSetItem.apply(this, arguments);
  };
})();

window.addEventListener("setItemEvent", function (e) {
  // 監(jiān)聽(tīng) username 值變化
  if (e.key === "username") {
    const oldValue = localStorage.getItem(e.key);
    console.log("username 舊值：" + oldValue + "，新值：" + e.newValue);
  }
});

let str = "0123456789";
let temp = "";
// 先生成一個(gè) 10KB 的字符串
while (str.length !== 10240) {
  str = str + "0123456789";
}
// 清空
localStorage.clear();
// 計(jì)算總量
const computedTotal = () => {
  return new Promise((resolve) => {
    // 往 localStorage 中累積存儲(chǔ) 10KB
    const timer = setInterval(() => {
      try {
        localStorage.setItem("temp", temp);
      } catch (e) {
        // 報(bào)錯(cuò)說(shuō)明超出最大存儲(chǔ)
        resolve(temp.length / 1024);
        clearInterval(timer);
        // 統(tǒng)計(jì)完記得清空
        localStorage.clear();
      }
      temp += str;
    }, 0);
  });
};
// 計(jì)算使用量
const computedUse = () => {
  let cache = 0;
  for (let key in localStorage) {
    if (localStorage.hasOwnProperty(key)) {
      cache += localStorage.getItem(key).length;
    }
  }
  return (cache / 1024).toFixed(2);
};

(async () => {
  const total = await computedTotal();
  let use = "0123456789";
  for (let i = 0; i < 1000; i++) {
    use += "0123456789";
  }
  localStorage.setItem("use", use);
  const useCache = computedUse();

  console.log(`最大容量${total}KB`);
  console.log(`已用${useCache}KB`);
  console.log(`剩余可用容量${total - useCache}KB`);
})();

const LZString = require("lz-string");
const data = "This is a test message";
// 壓縮
const compressedData = LZString.compress(data);
localStorage.setItem("test", compressedData);
// 解壓
const decompressedData = LZString.decompress(localStorage.getItem("test"));

for (const key in userInfo) {
  localStorage.setItem(key, userInfo[key]);
}

for (const key in userInfo) {
  if (["userName", "legalEntityName", "isOnline"].includes(key)) {
    localStorage.setItem(key, userInfo[key]);
  }
}

// 設(shè)置
function set(key, value){
  const time = new Date().getTime(); //獲取當(dāng)前時(shí)間
  localStorage.setItem(key, JSON.stringify({value, time})); //轉(zhuǎn)換成json字符串
}
// 獲取
function get(key, exp){
  // exp 過(guò)期時(shí)間
  const value = localStorage.getItem(key); 
  const valueJson = JSON.parse(value); 
  //當(dāng)前時(shí)間 - 存儲(chǔ)的創(chuàng)建時(shí)間 > 過(guò)期時(shí)間
  if(new Date().getTime() - valueJson.time > exp){
    console.log("expires"); //提示過(guò)期
  } else {
    console.log("value:" + valueJson.value);
  }
}

// 獲取
const isFavor = localStorage.getItem('isFavor');
this.state = {
  isFavor: isFavor !== null ? Number(isFavor) : EngineeringTypeEnum.FAVOR,
};
// 展示默認(rèn)值
<Form.Item name='isFavor' initialValue={this.state.isFavor}>
  <Select
    placeholder='篩選收藏的工程'
    onChange={(e) => this.changeFavor(e)}
    {...searchSmallFormProps}
  >
      {EngineeringTypeEnum.property.map(e => (<Option key={e.id} value={e.id}>{e.name}</Option>))}
  </Select>
</Form.Item>
// 變更
changeFavor = (e) => {
  localStorage.setItem('isFavor', e);
  this.setState({ isFavor: e });
};

// 獲取
const operationVisible = localStorage.getItem('operationVisible');
this.state = {
  operationVisible: operationVisible === null || operationVisible === 'true' ? true : false,
};
// 控制展示
<Modal
  title='操作指南'
  open={this.state.operationVisible}
  onCancel={() => { 
    this.setState({ operationVisible: false }); 
    localStorage.setItem('operationVisible', false); 
  }}
  footer={null}
  destroyOnClose={true}
>
  <Divider orientation='left'>動(dòng)作</Divider>
  <p>接口 》 用例 》 用例集，3級(jí)結(jié)構(gòu)滿足不了后續(xù)的使用，因此增加【動(dòng)作】這一層級(jí)，【動(dòng)作】是接口測(cè)試的最小單元，多個(gè)【動(dòng)作】可以組合成一個(gè)用例，多個(gè)用例可以聚合為用例集；</p>
  <Image src={OperationGuidePng} preview={false} />
</Modal>