浏览器本地存储localstorage

本地存储一般体现在搜索记录中,用于方便用户下次搜索

浏览器本地存储localstorage

在浏览器的控制台中的Application中查看数据的增删 ,首先先准备四个按钮来控制

<button type="button" onclick="saveDate()">点击存储数据</button>
		<button type="button" onclick="readDate()">点击查看数据</button>
		<button type="button" onclick="deleteDate()">点击删除数据</button>
		<button type="button" onclick="deleteAllDate()">点击清空数据</button>

为他们分别绑定点击事件

存储数据

let p = {name:'Tom',age:18}
			
function saveDate(){
localStorage.setItem('msg','alone');
localStorage.setItem('mag',1921);
localStorage.setItem('person',JSON.stringify(p));
}

点击按钮后在浏览器中就保存了数据,JSON.stringify是为了解析,不让他以{object,object}方式出现,方便阅读,如下图: 

 浏览器本地存储localstorage

 查看数据

function readDate(){
				console.log(localStorage.getItem('msg'));
				console.log(localStorage.getItem('mag'));
				console.log(JSON.parse(localStorage.getItem('person')));
			}

 点击按钮将在控制台打印出结果,对比之后发现确实是之前存在里面的数据

浏览器本地存储localstorage

 删除单个数据(或者多个,自己加代码就行)

function deleteDate(){
				localStorage.removeItem('msg');
			}

 这边删掉之前存的msg,在浏览器中显示如图:

浏览器本地存储localstorage

发现确实删掉了msg数据

清空数据 (全部清空)

function deleteAllDate(){
				localStorage.clear()
			}

 点击按钮Application中之前存在的数据将全部清空,以上就是localstorage的本地存储

上一篇:正则表达式


下一篇:Win7环境下VS2010配置Cocos2d-x-2.1.4最新版本号的开发环境