整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
ocalstorage本地存儲基本用法
如何創(chuàng)建和訪問 localStorage
<script type="text/javascript">localStorage.lastname="Smith";document.write(localStorage.lastname);</script>
上面就創(chuàng)建了一個localStorage。
我們再來做一個刷新頁面，增加訪問次數(shù)的功能！很簡單，代碼如下：
<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,具體如下：
調(diào)用setItem()方法，將對應(yīng)的名字和值傳遞出去，可以實現(xiàn)數(shù)據(jù)存儲
調(diào)用getItem()方法，將名字傳遞出去，可以獲取對應(yīng)的值
調(diào)用removeItem()方法，名稱作為參數(shù)，可以刪除對應(yīng)的數(shù)據(jù)
調(diào)用clear()方法，可以刪除所有存儲的數(shù)據(jù)
使用length屬性以及key()方法，傳入0~length-1的數(shù)字，可以枚舉所有存儲數(shù)據(jù)的名字
用法如下：
localStorage.setItem("name", "haorooms"); ? ?// 以"name"為名字存儲一個字符串localStorage.getItem("name"); ? ? ? ? ? ?// 獲取"name"的值// 枚舉所有存儲的名字/值對for(var i=0; i<localStorage.length; i++){ ? ? ? ?// length表示所有的名值對總數(shù)
? ?var name = localStorage.key(i); ? ? ? ? ? ?// 獲取第i對的名字
? ?var value = localStorage.getItem(name); ? ? ? ?// 獲取該對的值}localStorage.removeItem("name"); ? ? ? ?// 刪除"name"項localAStorage.clear(); ? ? ? ? ? ? ? ?// 全部刪除
sessionStorage和Localstorage區(qū)別
sessionStorage用法和Localstorage用法一樣，區(qū)別就是，sessionStorage是會話存儲，關(guān)閉瀏覽器，存儲內(nèi)容就會被清除。
低版本瀏覽器存儲兼容方案
IE User Data
微軟在IE5及之后的IE瀏覽器中實現(xiàn)了它專屬的客戶端存儲機制——“userData”。
userData可以實現(xiàn)一定量的字符串數(shù)據(jù)存儲，對于IE8以前的IE瀏覽器中，可以將其用作是Web存儲的替代方案。
iLocalStorage插件
由于IE8以下瀏覽器的本地存儲API不一樣，所以就寫了個插件兼容各大瀏覽器存儲。提供的方法及用法如下：
getItem: 獲取屬性setItem: 設(shè)置屬性removeItem: 刪除屬性iLocalStorage.setItem('key', 'value');console.log(iLocalStorage.getItem('key'));iLocalStorage.removeItem('key');
插件代碼
/**
* LocalStorage 本地存儲兼容函數(shù)
* getItem: 獲取屬性
* setItem: 設(shè)置屬性
* 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
------------------
切圖網(wǎng)（qietu.com）是一家專門從事html5前端開發(fā)的服務(wù)機構(gòu)，長期致力于提供高品質(zhì)的psd轉(zhuǎn)html5、響應(yīng)式切圖、webapp切圖，h5切圖等web前端開發(fā)服務(wù)。
專注web前端開發(fā)技術(shù)，關(guān)注用戶體驗，加我們公眾微信賬號：qietuwang（長按復(fù)制）
ebStorage的目的是克服由cookie所帶來的一些限制，當數(shù)據(jù)需要被嚴格控制在客戶端時，不需要持續(xù)的將數(shù)據(jù)發(fā)回服務(wù)器。
WebStorage兩個主要目標：
（1）提供一種在cookie之外存儲會話數(shù)據(jù)的路徑。
（2）提供一種存儲大量可以跨會話存在的數(shù)據(jù)的機制。
web存儲更加安全與快速，這些數(shù)據(jù)還不會保存到服務(wù)器，還可以存儲大量數(shù)據(jù)而不影響網(wǎng)站性能。
不管是 localStorage 還是 sessionStorage 使用方法都是一樣的語法，對常見操作語法進行示范。以下就以localStorage為例：
常見操作語法：
localStorage.key = value
localStorage.setItem(key,value)
localStorage.key
localStorage.getItem(key)
localStorage.removeItem(key)
delete localStorage.key
數(shù)據(jù)都是以鍵值對形式存在的，操作的時候與json有點類似。
應(yīng)用1：取出本地存儲的所有數(shù)據(jù)，以localStorage為例。
localStorage和sessionStorage是兩個對象，類似json。可遍歷取出數(shù)據(jù)，如：
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]}`)
}運行程序之后，結(jié)果如圖：
我們發(fā)現(xiàn)遍歷的時候把localStorage的屬性和方法全部打印出來了，而我們需要的只是我們存儲的三個數(shù)據(jù)，其余的都不要，此時我們換個方法。
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]}`)
}此時運行結(jié)果就是我們需要的結(jié)果了！
記住用戶登錄信息、存草稿、存郵件等經(jīng)常會使用 localStorage，我們介紹下幾種存儲方式的區(qū)別，可以更好地根據(jù)需求選擇存儲方式。
cookies 和 sessionStorage、localStorage區(qū)別如圖：
上述看三者存儲大小有很大差異，存儲內(nèi)容上也不同，cookie只能保存字符串類型，但sessionStorage和localStorage能夠支持任何類型的對象存儲。如果保存復(fù)雜json數(shù)據(jù)時，可以轉(zhuǎn)成字符串保存，取出時通過JSON.parse()轉(zhuǎn)成json格式。
安全性方面，web 存儲不會發(fā)送到服務(wù)器端，不用擔心被截獲，所以相對cookie安全些。
實例：網(wǎng)頁中寫信，自動保存草稿，網(wǎng)頁關(guān)閉重新打開之后數(shù)據(jù)依舊存在。
<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文件，此時發(fā)現(xiàn)并不會存儲，需要聲明下存儲是針對域的，所以我們需要放到服務(wù)內(nèi)，服務(wù)內(nèi)訪問才可以進行緩存。
需要的同學自己去下載個nginx。
地存儲
1 本地存儲簡介
在客戶端存儲數(shù)據(jù)
HTML5 提供了兩種在客戶端存儲數(shù)據(jù)的新方法：
localStorage - 沒有時間限制的數(shù)據(jù)存儲
sessionStorage - 針對一個 session 的數(shù)據(jù)存儲
之前, 這些都是由 cookie 完成的。但是 cookie 不適合大量數(shù)據(jù)的存儲, 因為它們由每個對服務(wù)器的請求來傳遞, 這使得 cookie 速度很慢而且效率也不高。
HTML5 使用 JavaScript 來存儲和訪問數(shù)據(jù)。
2 語法
localStorage 方法存儲的數(shù)據(jù)沒有時間限制。第二天、第二周或下一年之后, 數(shù)據(jù)依然可用。
localStorage 和sessionStorage分別是本地存儲和會話存儲, 統(tǒng)稱本地存儲。
存儲數(shù)據(jù)：localStorage.setItem('key','value');
讀取數(shù)據(jù)：localStorage.getItem('key')
刪除指定數(shù)據(jù)：localStorage.removeItem('key');
清空所有數(shù)據(jù)：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>
<!--
本地存儲存在自己電腦上了 他不能和服務(wù)器交互
一種：本地存儲(永久存儲不會過期)localStorage
一種：臨時會話(頁面關(guān)閉數(shù)據(jù)就沒了)sessionStorage
統(tǒng)稱本地存儲
二者的方法一毛一樣 咱們只以一個舉例子
cookie->可以喝服務(wù)器交互 是可以設(shè)置過期時間的
-->
<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>本地存儲數(shù)據(jù)庫會自動的為每一個網(wǎng)站(IP地址)建立一個獨立的表格, 在同一個網(wǎng)站(IP地址)下數(shù)據(jù)是可以共享的, 但是不能跨域。
不能跨瀏覽器存儲, 每個瀏覽器都有自己的小數(shù)據(jù)庫, Chrome存儲的, 火狐看不見。
localStorage是簡單的數(shù)據(jù)庫, 沒有查詢功能, 不能用sql操作, 只能簡單的存儲、讀取k-v對。
sessionStorage 瀏覽器窗口一旦關(guān)閉, 數(shù)據(jù)就丟失了
localStorage存儲的數(shù)據(jù), 永遠不丟失, 關(guān)機, 重啟都不會導(dǎo)致數(shù)據(jù)丟失, 除非清除了瀏覽器記錄
注意: 判斷l(xiāng)ocalStorage和sessionStorage是否有數(shù)據(jù)使用if直接判斷
if(localStorage.getItem("key001")){
}不能使用
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
