整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
ocalstorage本地存储基本用法
如何创建和访问 localStorage
<script type="text/javascript">localStorage.lastname="Smith";document.write(localStorage.lastname);</script>
上面就创建了一个localStorage。
我们再来做一个刷新页面，增加访问次数的功能！很简单，代码如下：
<script type="text/javascript">if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}else
{
localStorage.pagecount=1;
}document.write("Visits "+ localStorage.pagecount + " time(s).");</script>
上面是用点的方式进行操作，localStorage还有存储API,具体如下：
调用setItem()方法，将对应的名字和值传递出去，可以实现数据存储
调用getItem()方法，将名字传递出去，可以获取对应的值
调用removeItem()方法，名称作为参数，可以删除对应的数据
调用clear()方法，可以删除所有存储的数据
使用length属性以及key()方法，传入0~length-1的数字，可以枚举所有存储数据的名字
用法如下：
localStorage.setItem("name", "haorooms"); // 以"name"为名字存储一个字符串localStorage.getItem("name"); // 获取"name"的值// 枚举所有存储的名字/值对for(var i=0; i<localStorage.length; i++){ // length表示所有的名值对总数
var name = localStorage.key(i); // 获取第i对的名字
var value = localStorage.getItem(name); // 获取该对的值}localStorage.removeItem("name"); // 删除"name"项localAStorage.clear(); // 全部删除
sessionStorage和Localstorage区别
sessionStorage用法和Localstorage用法一样，区别就是，sessionStorage是会话存储，关闭浏览器，存储内容就会被清除。
低版本浏览器存储兼容方案
IE User Data
微软在IE5及之后的IE浏览器中实现了它专属的客户端存储机制——“userData”。
userData可以实现一定量的字符串数据存储，对于IE8以前的IE浏览器中，可以将其用作是Web存储的替代方案。
iLocalStorage插件
由于IE8以下浏览器的本地存储API不一样，所以就写了个插件兼容各大浏览器存储。提供的方法及用法如下：
getItem: 获取属性setItem: 设置属性removeItem: 删除属性iLocalStorage.setItem('key', 'value');console.log(iLocalStorage.getItem('key'));iLocalStorage.removeItem('key');
插件代码
/**
* LocalStorage 本地存储兼容函数
* getItem: 获取属性
* setItem: 设置属性
* removeItem: 删除属性
*
*
* @example
*
iLocalStorage.setItem('key', 'value');
console.log(iLocalStorage.getItem('key'));
iLocalStorage.removeItem('key');
*
*/(function(window, document){
// 1. IE7下的UserData对象
var UserData = {
userData: null,
name: location.href,
init: function(){
// IE7下的初始化
if(!UserData.userData){
try{
UserData.userData = document.createElement("INPUT");
UserData.userData.type = "hidden";
UserData.userData.style.display = "none";
UserData.userData.addBehavior("#default#userData");
document.body.appendChild(UserData.userData);
var expires = new Date();
expires.setDate(expires.getDate() + 365);
UserData.userData.expires = expires.toUTCString();
} catch(e){
return false;
}
}
return true;
},
setItem: function(key, value){
if(UserData.init()){
UserData.userData.load(UserData.name);
UserData.userData.setAttribute(key, value);
UserData.userData.save(UserData.name);
}
},
getItem: function(key){
if(UserData.init()){
UserData.userData.load(UserData.name);
return UserData.userData.getAttribute(key);
}
},
removeItem: function(key){
if(UserData.init()){
UserData.userData.load(UserData.name);
UserData.userData.removeAttribute(key);
UserData.userData.save(UserData.name);
}
}
};
// 2. 兼容只支持globalStorage的浏览器
// 使用： var storage = getLocalStorage();
function getLocalStorage(){
if(typeof localStorage == "object"){
return localStorage;
} else if(typeof globalStorage == "object"){
return globalStorage[location.href];
} else if(typeof userData == "object"){
return globalStorage[location.href];
} else{
throw new Error("不支持本地存储");
}
}
var storage = getLocalStorage();
function iLocalStorage(){
}
// 高级浏览器的LocalStorage对象
iLocalStorage.prototype = {
setItem: function(key, value){
if(!window.localStorage){
UserData.setItem(key, value);
}else{
storage.setItem(key, value);
}
},
getItem: function(key){
if(!window.localStorage){
return UserData.getItem(key);
}else{
return storage.getItem(key);
}
},
removeItem: function(key){
if(!window.localStorage){
UserData.removeItem(key);
}else{
storage.removeItem(key);
}
}
}
if (typeof module == 'object') {
module.exports = new iLocalStorage();
}else {
window.iLocalStorage = new iLocalStorage();
}})(window, document);
其他插件
localForage：https://github.com/mozilla/localForage
store.js：https://github.com/marcuswestin/store.js
------------------
切图网（qietu.com）是一家专门从事html5前端开发的服务机构，长期致力于提供高品质的psd转html5、响应式切图、webapp切图，h5切图等web前端开发服务。
专注web前端开发技术，关注用户体验，加我们公众微信账号：qietuwang（长按复制）
ebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。
WebStorage两个主要目标：
（1）提供一种在cookie之外存储会话数据的路径。
（2）提供一种存储大量可以跨会话存在的数据的机制。
web存储更加安全与快速，这些数据还不会保存到服务器，还可以存储大量数据而不影响网站性能。
不管是 localStorage 还是 sessionStorage 使用方法都是一样的语法，对常见操作语法进行示范。以下就以localStorage为例：
常见操作语法：
localStorage.key = value
localStorage.setItem(key,value)
localStorage.key
localStorage.getItem(key)
localStorage.removeItem(key)
delete localStorage.key
数据都是以键值对形式存在的，操作的时候与json有点类似。
应用1：取出本地存储的所有数据，以localStorage为例。
localStorage和sessionStorage是两个对象，类似json。可遍历取出数据，如：
localStorage.user = "倩倩"
localStorage.age = "18"
localStorage.job = "打杂"
console.log(localStorage)// {job: "打杂", age: "18", user: "倩倩", length: 3}
for(key in localStorage){
console.log(`${key}--${localStorage[key]}`)
}运行程序之后，结果如图：
我们发现遍历的时候把localStorage的属性和方法全部打印出来了，而我们需要的只是我们存储的三个数据，其余的都不要，此时我们换个方法。
localStorage.user = "倩倩"
localStorage.age = "18"
localStorage.job = "打杂"
console.log(localStorage)// {job: "打杂", age: "18", user: "倩倩", length: 3}
for(let i=0;i<localStorage.length;i++){
let key = localStorage.key(i)
console.log(`${key}:${localStorage[key]}`)
}此时运行结果就是我们需要的结果了！
记住用户登录信息、存草稿、存邮件等经常会使用 localStorage，我们介绍下几种存储方式的区别，可以更好地根据需求选择存储方式。
cookies 和 sessionStorage、localStorage区别如图：
上述看三者存储大小有很大差异，存储内容上也不同，cookie只能保存字符串类型，但sessionStorage和localStorage能够支持任何类型的对象存储。如果保存复杂json数据时，可以转成字符串保存，取出时通过JSON.parse()转成json格式。
安全性方面，web 存储不会发送到服务器端，不用担心被截获，所以相对cookie安全些。
实例：网页中写信，自动保存草稿，网页关闭重新打开之后数据依旧存在。
<textarea name="" id="email" cols="30" rows="10" oninput="save()"></textarea>
<script>
function save(){
var x = document.getElementById("email")
localStorage.setItem('email',x.value)
}
window.onload =function(){
var x = document.getElementById("email")
x.value = localStorage.getItem("email")
}
</script>注意：如果你是直接使用浏览器打开html文件，此时发现并不会存储，需要声明下存储是针对域的，所以我们需要放到服务内，服务内访问才可以进行缓存。
需要的同学自己去下载个nginx。
地存储
1 本地存储简介
在客户端存储数据
HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
之前, 这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储, 因为它们由每个对服务器的请求来传递, 这使得 cookie 速度很慢而且效率也不高。
HTML5 使用 JavaScript 来存储和访问数据。
2 语法
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后, 数据依然可用。
localStorage 和sessionStorage分别是本地存储和会话存储, 统称本地存储。
存储数据：localStorage.setItem('key','value');
读取数据：localStorage.getItem('key')
删除指定数据：localStorage.removeItem('key');
清空所有数据：localStorage.clear()
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<!--
本地存储存在自己电脑上了 他不能和服务器交互
一种：本地存储(永久存储不会过期)localStorage
一种：临时会话(页面关闭数据就没了)sessionStorage
统称本地存储
二者的方法一毛一样 咱们只以一个举例子
cookie->可以喝服务器交互 是可以设置过期时间的
-->
<script type="text/javascript">
console.log(localStorage)
console.log(sessionStorage)
//写入东西(随便写,你存储的值)
//localStorage.setItem(key(小卡片),value(你存的包))
localStorage.setItem("key001","梁永灿");
localStorage.setItem("key002","迪丽热巴");
localStorage.setItem("key003","杨颖");
localStorage.setItem("key004","大黄");
localStorage.setItem("key004","小黄");
//读取
console.log(localStorage.getItem("key001"))
//console.log(localStorage)
//删除
localStorage.removeItem("key001");
//全部删除
localStorage.clear()
</script>
</body>
</html>本地存储数据库会自动的为每一个网站(IP地址)建立一个独立的表格, 在同一个网站(IP地址)下数据是可以共享的, 但是不能跨域。
不能跨浏览器存储, 每个浏览器都有自己的小数据库, Chrome存储的, 火狐看不见。
localStorage是简单的数据库, 没有查询功能, 不能用sql操作, 只能简单的存储、读取k-v对。
sessionStorage 浏览器窗口一旦关闭, 数据就丢失了
localStorage存储的数据, 永远不丢失, 关机, 重启都不会导致数据丢失, 除非清除了浏览器记录
注意: 判断localStorage和sessionStorage是否有数据使用if直接判断
if(localStorage.getItem("key001")){
}不能使用
*请认真填写需求信息，我们会在24小时内与您取得联系。
