实例以及详解localStorage进行本地存储
localStorage的使用方法
localStorage的方法非常简单，就是基本的增删查
几点注意
存储在 localStorage 里面的数据没有过期时间（expiration time），而存储在 sessionStorage 里面的数据会在浏览器会话（browsing session）结束时被清除，即浏览器关闭时。
无论是 localStorage 还是 sessionStorage 中保存的数据都仅限于该页面的协议。
*浏览器对localStorage的大小限制是*5MB（每个来源），比cookie的大了不少，基本可以满足日常需求了。
localStorage只能存储字符串，非字符串的数据在存储之前会被转换成字符串。所以在存储一些复杂数据类型时可能有些麻烦，通常的做法是先使用JSON.stringfy()方法将其转换为字符串后存储，使用时取出后再使用JSON.parse()方法进行还原。
// 存储用户信息
var user = {
name: "John",
id: "321456",
isVIP: true,
arr: [3,2,1],
};
var str = JSON.stringfy(user);
localStorage.setItem("userInfo", str);
// 提取用户信息
var infoStr = localStorage.getItem("userInfo");
var info = JSON.parse(infoStr);实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,minimum-scale=1.0">
<title>FileReader</title>
</head>
<body>
<div id="file-div">
<input type="file" name="inputfile" accept="text/plain, text/css, text/html, text/javascript, text/markdown" />
<textarea name="filereader" placeholder="请选择txt、js、css或html文件，文件内容会被自动读取"></textarea>
<button type="button" name="storebutton">本地存储</button>
<button type="button" name="clearbutton">清除存储</button>
</div>
<script>
window.onload = function(){
var text = document.getElementsByName("filereader")[0],
inputFile = document.getElementsByName("inputfile")[0],
storeButton = document.getElementsByName("storebutton")[0],
clearButton = document.getElementsByName("clearbutton")[0];
// 检测localStorage中是否已有缓存
if(window.localStorage.getItem("textareaStorage")) {
alert("检测到本地存储的文件，已为您自动恢复");
text.value = window.localStorage.getItem("textareaStorage");
}
//上传文件
inputFile.onchange = function(){
console.log(this.files);
var reader = new FileReader();
reader.readAsText(this.files[0], "UTF-8");
reader.onload = function (e) {
// urlData就是对应的文件内容
var urlData = this.result;
text.value = urlData;
};
};
// 存储文件
storeButton.onclick = function(){
window.localStorage.setItem("textareaStorage", text.value);
alert("保存成功");
};
// 清除存储
clearButton.onclick = function(){
window.localStorage.removeItem("textareaStorage");
alert("清除成功");
};
};
</script>
</body>
</html>store.js
store.js 是一个兼容所有浏览器的 LocalStorage 包装器，不需要借助 Cookie 或者 Flash来实现。它提供非常了简洁的 API 来实现跨浏览器的本地存储功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,minimum-scale=1.0">
<title>缓存</title>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/store.min.js"></script>
</head>
<body>
<p id="p">缓存</p>
<script>
init();
function init(){
if(!store.enabled){
alert("你的浏览器不支持本地存储，请使用更高版本的浏览器");
return;
}else{
store.set("name","mavis");
store.set("user",{name:"mavis",likes:"javascript"})
if(store.get("name")){
alert("检测到本地存储的文件，已为您自动恢复");
$("#p").html(store.get("name"))
}
var user = store.get("user"); // 获取存储的对象 - 自动执行 JSON.parse
store.forEach(function(key, val) {
console.log(key, "==", val)
}) //
}
}
</script>
</body>
</html>声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
- 上一篇： 使用QML LocalStorage来存储我们的数据
- 下一篇： 多进程通信之消息队列
