html5本地存储

by gothic

HTML

<fieldset>
		<legend>web storage</legend>
		<label for="localData">填个啥</label>
		<input type="text" id="localData"><br>
		<label for="sessionData">写个毛</label>
		<input type="text" id="sessionData">
	</fieldset>
	<button onclick="saveData()">Save Data</button>
	<button onclick="loadData()">Load Data</button>

CSS

fieldset {
			margin-bottom: 15px;
			padding: 10px;
		}
		label {
			width: 140px;
			display: inline-block;
			vertical-align: top;
			margin: 6px;
		}
		legend {
			padding: 0 3px;
			font-weight: bold;
			font-variant: small-caps;
		}
		input {
			margin-top: 12px;
			width: 300px;
		}

JavaScript

function saveData() {
		var localData = document.getElementById("localData").value;
		var sessionData = document.getElementById("sessionData").value;
		localStorage.setItem("localData",localData);
		sessionStorage.setItem("sessionData",sessionData);
	}
	function loadData() {
		var localData = localStorage.getItem("localData");
		var sessionData = sessionStorage.getItem("sessionData");
		if (localData != null) {
			document.getElementById("localData").value = localData;
		}
		if (sessionData !=null) {
			document.getElementById("sessionData").value = sessionData;
		}
	}