本地存储

361 阅读1分钟

cookie

  • cookie 存储大小为4K 可以设置过期时间,如果不设置关闭浏览器窗口就没了

添加/修改/删除cookie的方法

    /*设置cookie*/
    function setCookie(key, value, expires) {//expires 过期时间,string类型
      var date = new Date();
      date.setDate(date.getDate() + expires*1);
      document.cookie = key + '=' + value + ';expires=' + date.toUTCString();
    }
    /*获取cookie*/ 
    function getCookie(key) {
      var tmp = document.cookie; //'name=wxc; text=111'
      tmp = tmp.split(';'); // ["name=wxc", " text=111"]
      for(var i=0; i<tmp.length; i++) {
        var arr =  tmp[i].split('=')  // [' name','wxc']
        // trim() 删除字符串前面或后面的空格
        if (arr[0].trim() == key ) {
          return arr[1];
        }
      }
    }
    /*删除cookie*/
    function deleteCookie(key){
      var date =  new Date();
      date.setDate(date.getDate() - 1);
      document.cookie = key + '=null;expires=' + date.toUTCString();
    } 

localStorage

  • localStorage 可存数据大小为5M 会永久的存储在浏览器中 除非手动删除

设置

  1. localStorage.key = value
  2. localStorage.setItem(key, value)

获取

  1. localStorage.key
  2. localStorage.getItem(key)

sessionStorage

  • sessionStorage 可存储的大小为5M 浏览器窗口关闭之后就没了
<script>
    //设置localStorage
    localStorage.name = 'zs';
    localStorage.setItem('age', 18)
    console.log(localStorage.name)
    console.log(localStorage.getItem('name'));
    //设置sessionStorage
    sessionStorage.weight = '123kg';
    sessionStorage.setItem('height', '170cm');
    // 获取sessionStorage   会返回一个对象
    console.log(sessionStorage);
    console.log(sessionStorage.weight);
    console.log(sessionStorage.getItem('height'))
</script>