Vue入門008- 浏覽器本地存儲 WebStorage

localStorage

<h2>localStorage</h2>
		<button onclick="saveData()">點我儲存一個資料</button>
		<button onclick="readData()">點我讀取一個資料</button>
		<button onclick="deleteData()">點我删除一個資料</button>
		<button onclick="deleteAllData()">點我清空一個資料</button>

		<script type="text/javascript" >
			let p = {name:'張三',age:18}

			function saveData(){
				localStorage.setItem('msg','hello!!!')
				localStorage.setItem('msg2',666)
				localStorage.setItem('person',JSON.stringify(p))
			}

			function readData(){
				console.log(localStorage.getItem('msg'))
				console.log(localStorage.getItem('msg2'))

				const result = localStorage.getItem('person')
				console.log(JSON.parse(result))

				// console.log(localStorage.getItem('msg3'))
			}

			function deleteData(){
				localStorage.removeItem('msg2')
			}

			function deleteAllData(){
				localStorage.clear()
			}
		</script>           

sessionStorage

<h2>sessionStorage</h2>
		<button onclick="saveData()">點我儲存一個資料</button>
		<button onclick="readData()">點我讀取一個資料</button>
		<button onclick="deleteData()">點我删除一個資料</button>
		<button onclick="deleteAllData()">點我清空一個資料</button>

		<script type="text/javascript" >
			let p = {name:'張三',age:18}

			function saveData(){
				sessionStorage.setItem('msg','hello!!!')
				sessionStorage.setItem('msg2',666)
				sessionStorage.setItem('person',JSON.stringify(p))
			}
			function readData(){
				console.log(sessionStorage.getItem('msg'))
				console.log(sessionStorage.getItem('msg2'))

				const result = sessionStorage.getItem('person')
				console.log(JSON.parse(result))

				// console.log(sessionStorage.getItem('msg3'))
			}
			function deleteData(){
				sessionStorage.removeItem('msg2')
			}
			function deleteAllData(){
				sessionStorage.clear()
			}
		</script>           

WebStorage 倉儲的都是字元串，要存對象需要JSON.stringify(p)在倉儲

1. 存儲内容大小一般支援5MB左右（不同浏覽器可能還不一樣）

2. 浏覽器端通過 Window.sessionStorage 和 Window.localStorage 屬性來實作本地存儲機制。

3. 相關API：

1. xxxxxStorage.setItem('key', 'value');

該方法接受一個鍵和值作為參數，會把鍵值對添加到存儲中，如果鍵名存在，則更新其對應的值。

2. xxxxxStorage.getItem('person');

該方法接受一個鍵名作為參數，傳回鍵名對應的值。

3. xxxxxStorage.removeItem('key');

​ 該方法接受一個鍵名作為參數，并把該鍵名從存儲中删除。

4. xxxxxStorage.clear()

​ 該方法會清空存儲中的所有資料。

4. 備注：

1. SessionStorage存儲的内容會随着浏覽器視窗關閉而消失。

2. LocalStorage存儲的内容，需要手動清除才會消失。

3. xxxxxStorage.getItem(xxx)如果xxx對應的value擷取不到，那麼getItem的傳回值是null。

4. JSON.parse(null)的結果依然是null。

代碼摘錄于尚矽谷Vue學習課件