Web Storageに保存したデータを異なる文字コードで読みだしてみる

Javascript HTML

私はウェブサイトを作るにあたり以前は主にShift-JISを使用していましたが、最近はUTF-8を使用しています。
先日、運営するサイトをリニューアルする機会があったのですが、HTML,Javascriptが共にShift-JISで書かれているサイトをUTF-8に変更することにしました。
しかし当該サイトではlocalStorageを使ってデータを保存しておりこの中には日本語も含まれています。
文字コードを変更した結果このデータを上手く読み出す事ができなくなってしまっては困るので各ブラウザのWeb Storageの文字コードの扱いを調べてみました。

具体的には下記のHTMLファイルと、文字コード指定をShift-JISに変更して保存しなおしたファイルを同じディレクトリに置き、一方でlocalStorageに保存したデータをもう一方で読み出すという形で確認しました。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv="Content-Script-Type" content="text/javascript">
		<title>Web Storage Encoding test</title>
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script>
			var setItem = function(){
				localStorage.setItem('testItem', $('#textfield').val());
				window.alert('localStorageに保存しました');
				$('#textfield').val('');
			};
			var readItem = function(){
				$('#result').html(localStorage.getItem('testItem'));
			};
		</script>
	</head>
	<body>
		<textarea id="textfield"></textarea>
		<br>
		<button onclick="setItem()">保存</button>
		<br>
		<button onclick="readItem()">読み出し</button>
		<div id="result"></div>
	</body>
</html>

結果はテストしたChrome、Firefox、IE8のいずれにおいても全く問題なく読み出すことができました。
UTF-8→Shift-JISもShift-JIS→UTF-8も共に可能です。
基本的な文字はもちろん「♕」や「☠」などの特殊記号も問題ありません。各ブラウザともファイル自体のエンコーディングとStorageのエンコーディングは完全に区別して扱われているようです。

頻繁にあることではないと思いますが文字コードをまたぐリニューアルも安心して行えますね！