js把信息存儲

A. js創建json數據並保存

1、新建一個HTML頁面，命名為test.html。

B. 怎麼用js實現把數據存儲到本地

可以用localstorge或者是瀏覽器本地資料庫，這對瀏覽器有要求，低版本的IE是不支持的

C. js 編程需存儲大量數據，有什麼好的方法

1、Cookies。這個不說了，容量小，還有性能問題。

2、localStorage、sessionStorage，IE8+才支持，容量一般在5MB左右。

3、WebSQL，IE不支持。好處是結構跟關系型資料庫一樣，而且沒有容量限制；缺點是慢。

4、IndexDB，IE10+才支持，已被廢棄的一種特性（廢棄的意思是你可以繼續使用，但是瀏覽器廠商已經不再維護這個特性了，即使有BUG也沒人管了）。

D. draft-js 怎麼存儲內容

富文本內容的結構化存儲一個顯而易見的好處是表現力更強
以用 Python 判斷富文本中有沒有圖片為例。用傳統的 HTML 方式存儲富文本：
# 依賴用來渲染頁面的 HTML tag 及 CSS class，或許應該寫個更嚴謹的正則表達式，如果要取圖片地址之類的元信息則更麻煩
hasImage = '<img class="RichText-image"' in richContent

Draft.js：
# 語義清晰，和渲染邏輯無關
hasImage = any(entity.type == 'image' for entity in richContent.entityMap)

富文本內容的結構化存儲的另一個好處是內容的存儲和渲染邏輯分離
分離能夠帶來更高的靈活性
例如知乎站上用 <a href="/people/s0s0">@李奇</a> 來存儲富文本中對 urlToken 為 s0s0 的用戶的 mention，當加入支持用戶修改自定義的 urlToken 的功能後，如果 urlToken 被修改，那麼原先的鏈接就失效了。解決方案是把鏈接的存儲方式改為 <a href="memberHash">@李奇</a>，其中 memberHash 是唯一的不變的值，為此我們不得不支持 /people/:memberHash 形式的個人主頁鏈接。
另一種思路是存 memberHash，在渲染之前根據 member_hash 去讀取現在的 urlToken。在 Draft.js 中為 mention 創建 entity 如下：
{
type: 'mention',
data: {
menberHash: 'abc',
}
}

存儲和渲染的邏輯分離更容易保證渲染結果的確定性
以一段既加粗又傾斜的文本為例，對於一般的基於 HTML 存儲的富文本編輯器，如果先傾斜後加粗，很可能得到這個結果：
<b><i>我被加粗了，也被傾斜了</i></b>

如果先加粗後傾斜，則是：
<i><b>我被加粗了，也被傾斜了</b></i>

Draft.js：
{
"inlineStyleRanges": [
{"offset": 0, "length": 5, "style": "BOLD"},
{"offset": 0, "length": 5, "style": "ITALIC"}
]
}

<i> 和 <b> 標簽的順序由渲染邏輯中決定，我們甚至可以改用 CSS class 或者 inline style 來添加樣式（Draft.js 默認的做法）。
內容的存儲和渲染邏輯分離帶來的另一個可能的好處是多端復用
比如在 app 端做原生渲染，結構化數據比 HTML 更利於解析。

E. js本地存儲怎麼實現

userData

語法：

XML<Prefix: CustomTag ID=sID STYLE="behavior:url('#default#userData')" />

HTML<ELEMENT STYLE="behavior:url('#default#userData')" ID=sID>

Scriptingobject .style.behavior = "url('#default#userData')"

object .addBehavior ("#default#userData")

屬性:

expires 設置或者獲取 userData behavior 保存數據的失效日期。

XMLDocument 獲取 XML 的引用。

方法:

getAttribute() 獲取指定的屬性值。

load(object) 從 userData 存儲區載入存儲的對象數據。

removeAttribute() 移除對象的指定屬性。

save(object) 將對象數據存儲到一個 userData 存儲區。

setAttribute() 設置指定的屬性值。

localStorage

方法：

localStorage.getItem(key):獲取指定key本地存儲的值

localStorage.setItem(key,value)：將value存儲到key欄位

localStorage.removeItem(key):刪除指定key本地存儲的值

localData={
hname:location.hostname?location.hostname:'localStatus',
isLocalStorage:window.localStorage?true:false,
dataDom:null,

initDom:function(){//初始化userData
if(!this.dataDom){try{this.dataDom=document.createElement('input');//這里使用hidden的input元素
this.dataDom.type='hidden';this.dataDom.style.display="none";this.dataDom.addBehavior('#default#userData');//這是userData的語法
document.body.appendChild(this.dataDom);varexDate=newDate();
exDate=exDate.getDate()+30;this.dataDom.expires=exDate.toUTCString();//設定過期時間
}catch(ex){returnfalse;
}
}returntrue;
},
set:function(key,value){if(this.isLocalStorage){
window.localStorage.setItem(key,value);
}else{if(this.initDom()){this.dataDom.load(this.hname);this.dataDom.setAttribute(key,value);this.dataDom.save(this.hname)
}
}
},
get:function(key){if(this.isLocalStorage){returnwindow.localStorage.getItem(key);
}else{if(this.initDom()){this.dataDom.load(this.hname);returnthis.dataDom.getAttribute(key);
}
}
},
remove:function(key){if(this.isLocalStorage){
localStorage.removeItem(key);
}else{if(this.initDom()){this.dataDom.load(this.hname);this.dataDom.removeAttribute(key);this.dataDom.save(this.hname)
}
}
}
}