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)
}
}
}
}