I'm surprised at how many people don't know about a feature they probably already have, found in the Web Developer plugin for Firefox. The Edit CSS lets you see your changes live as you type. I use it all the time.
If you push in the "Stick" button, changes are not lost if you refresh. It does also have a save button, but yes, you still need to upload the change. (Even though I tend to copy/paste instead of using this.)
But, this is---for me---a one time thing, after I've made all the changes I want and things look great. It makes the CTRL-S, Alt-Tab, Reload procedure that was originally described only need to happen once, instead of lots of times in rapid succession.
This is actually the only thing I keep the webdev tools addon around for now, everything else I used to use it for is either in firebug or I've found other implementations for (eg W3C checks I use unicorn first which I have a saved search "key" for).
You hit refresh and those changes are gone.
I see the value of this for alot of one-person development shops or front-end devs that do a lot of client design work.
Your client calls you, "Hey, this thingy here isn't lining up right"
"click. click. publish"
"refresh the page"
"ohhh....how did you do that?" (Client amazed)