简体   繁体   中英

What's wrong with my javascript local storage?

I'm writing some code that uses the browser's local storage. The first function:

function createLocalStore(){
    if(window.localStorage.getItem("iTotal")===null){
        window.localStorage.setItem("iTotal", 0);
    }
    if(window.localStorage.getItem("mTotal")===null){
        window.localStorage.setItem("mTotal", 0);
    }
    if(window.localStorage.getItem("yTotal")===null){
        window.localStorage.setItem("yTotal", 0);
    }
    if(window.localStorage.getItem("purgeDate")===null){
        today= new Date();
        purgeDate= new Date(today.getYear(),today.getMonth(),today.getDay()+1);
        window.localStorage.setItem("purgeDate", purgeDate);
    }
    if(window.localStorage.getItem("purchIndex")===null){
        window.localStorage.setItem("purchIndex", 0);
    }
    if(window.localStorage.getItem("depIndex")===null){
        window.localStorage.setItem("depIndex", 0);
    }
}

Works beautifully. However, these two functions:

function storePurchase(n,p,d){
    index=window.localStorage.getItem("purchIndex");
    var purch={
        name1: n,
        price: p,
        date: d
    };
    if(window.localStorage.getItem("purch"+index)!==null){
        alert("storage error!");
    }
    else{
        window.localStorage.setItem("purch"+index,purch);
        window.localStorage.setItem("purchIndex", window.localStorage.getItem("purchIndex")+1);
        window.localStorage.setItem("iTotal", window.localStorage.getItem("iTotal")-window.localStorage.setItem("purch"+index));
        window.localStorage.setItem("mTotal", window.localStorage.getItem("mTotal")-window.localStorage.setItem("purch"+index));
        window.localStorage.setItem("yTotal", window.localStorage.getItem("yTotal")-window.localStorage.setItem("purch"+index));
     }
}
function storeDeposit(p,d){
     index=window.localStorage.getItem("depIndex");
     var dep={
        price: p,
        date: d
     };
     if(window.localStorage.getItem("dep"+index)!==null){
        alert("storage error!");
     }
     else{
        window.localStorage.setItem("dep"+index,dep);
        window.localStorage.setItem("depIndex", window.localStorage.getItem("depIndex")+1);
        window.localStorage.setItem("iTotal", window.localStorage.getItem("iTotal")+window.localStorage.setItem("dep"+index));
        window.localStorage.setItem("mTotal", window.localStorage.getItem("mTotal")+window.localStorage.setItem("dep"+index));
        window.localStorage.setItem("yTotal", window.localStorage.getItem("yTotal")+window.localStorage.setItem("dep"+index));
     }
}

do not write to local storage for some reason. I call them as:

var price = document.getElementById('pPrice').value;
var name = document.getElementById('pName').value;
var date=new Date();
var sDate = '<input type="hidden" class="createDate" value="'+date+'"></br>';
storePurchase(name, price, date);

and

var price=document.getElementById('dPrice').value;
var date=new Date();
var sDate = '<input type="hidden" class="createDate" value="'+date+'"></br>';
storeDeposit(price, date);

So I'm really unsure where the problem is. If anyone can point it out, it'd be greatly appreciated. Thanks in advance for all the help.

Problem

You're not passing in a value when calling setItem here:

From storePurchase

window.localStorage.setItem("iTotal", window.localStorage.getItem("iTotal")-window.localStorage.setItem("purch"+index));
window.localStorage.setItem("mTotal", window.localStorage.getItem("mTotal")-window.localStorage.setItem("purch"+index));
window.localStorage.setItem("yTotal", window.localStorage.getItem("yTotal")-window.localStorage.setItem("purch"+index));

//The invalid portion from above:
window.localStorage.setItem("purch"+index)

From storeDeposit

window.localStorage.setItem("iTotal", window.localStorage.getItem("iTotal")+window.localStorage.setItem("dep"+index));
window.localStorage.setItem("mTotal", window.localStorage.getItem("mTotal")+window.localStorage.setItem("dep"+index));
window.localStorage.setItem("yTotal", window.localStorage.getItem("yTotal")+window.localStorage.setItem("dep"+index));

//The invalid portion from above:
window.localStorage.setItem("dep"+index)

Solution

You probably meant these to be calls to getItem .

From storePurchase

window.localStorage.setItem("iTotal", window.localStorage.getItem("iTotal")-window.localStorage.getItem("purch"+index));
window.localStorage.setItem("mTotal", window.localStorage.getItem("mTotal")-window.localStorage.getItem("purch"+index));
window.localStorage.setItem("yTotal", window.localStorage.getItem("yTotal")-window.localStorage.getItem("purch"+index));

From storeDeposit

window.localStorage.setItem("iTotal", window.localStorage.getItem("iTotal")+window.localStorage.getItem("dep"+index));
window.localStorage.setItem("mTotal", window.localStorage.getItem("mTotal")+window.localStorage.getItem("dep"+index));
window.localStorage.setItem("yTotal", window.localStorage.getItem("yTotal")+window.localStorage.getItem("dep"+index));

I think you dont expect how localStorage work when you pass object to save

var purch={
    name1: n,
    price: p,
    date: d
};

window.localStorage.setItem("purch1",purch);

So now when you call

window.localStorage.getItem("purch1");
// result [object Object]

Must be like this

// to set json
window.localStorage.setItem("purch1",JSON.stringify(purch));
// to get json
var data = JSON.parse(window.localStorage.getItem("purch1"));

Why you don't write your own code to get/set data(because i see big bunch of code, unreadeable!)

function set(key, value){
  if(key && value){
    /* serialize */
    if(typeof value == "object")
      value = JSON.stringify(value);
    try{
      localStorage.setItem(key, value);
    }
    catch(e){
      if(e == QUOTA_EXCEEDED_ERR){
        console.log("MAX_SIZE_ERROR", e);
      }
      console.log("ERROR", e);
    }
  }
  else console.warn("Must be 2 params", key, value);
  return null;
}

function get(key){
  var item = localStorage.getItem(key);
  if(!item) return item;

  try{
    /* check that string is object*/
    item = JSON.parse(item);
  }
  catch(e){}
  return item;
}

Now you can write by using this code (just example, write your own to understand how localStorage work, it will be great practice!)

set("purch"+index, purch);

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM