How to save CSS changes of Styles panel of Chrome Developer Tools?

You're looking in the wrong section of "Resources". It's not under "Local Storage", it's under "Frames": The above screenshot shows a diff of the original styles against the new modifications made in the devtools. You can right-click the item in the left pane and save it back to disk.

You can save your CSS changes from Chrome Dev Tools itself. Check out this video http://www.youtube.com/watch?v=N8SS-rUEZPg&t=8m20s to see how it's done (you just right click on the revision you'd like to save and then click "Save As"). Still, the video is worth watching! Might even want to start from the beginning.

Now that Chrome 18 was released last week with the required APIs, I published my chrome extension in the Chrome web store. The extension automatically saves changes in CSS or JS in Developer tools into the local disk. Go check it out. http://tomicloud.com/2012/04/save-css-chrome-ext

There's now an experimental API for DevTools extensions to receive notifications on the resources being changed -- so you can create an extension that will integrate with your IDE of choice or just post the resource content to a WebDAV server: http://www.corp.google.com/~caseq/devtoolsext/docs/experimental.devtools.inspectedWindow.html#event-onResourceContentCommitted