"localstorage使用" 检索
共 1162 条结果
HTML5中localStorage，seeionStorage API使用
localStorage，seeionStorage API使用不管我们使用哪种存储方式 ，第一步都应该判断浏览器是否支持。localStorage是否支持浏览器的代码：if(window.localStorage){
alert(“浏览器支持”)；
}else{
alert(“浏览器不支持”);
}由于localStorage，seeionStorage 方法类似，这里就指介绍localStorage；添加方法：添加方式一：localStorage.name = “zjx”;添加方式二：localStorage[“age”]=“17”;添加方式三：localStorage.setItem(“sex” , ”mane”);语气对应的获取数据的方法：获取方式一：var call = localStorage.name;获取方式二：var val2 = localstorage[“age”];获取方式三：var val3 = localStorage.getItem(“sex”);如何删除数据：localStorage.removeItem(“name”);清除掉所有的数据：localStorage.clear();注意的地方：localStorage 存储的数据只能是字符串，即使在存储的时候保存的是其他类型，获取到的还是一个字符串。如果我们要在localStorage 中存储一个json 格式的数据，不经过处理直接存储肯定是不可以的，我们可以使用 json 格式数据的转换方法 JSON.stringigy()和JSON.parse(),可以在 JSON 格式和字符串之间相互转换。实例代码：var message = {name:”zjx”,age:18,sex:”man”};
localStorage.setItem(“message”,JSON.stringify(message));
var newmessage = JSON.parse(localStorage.getItem(“message”));!!! 不要在这些里面存储敏感信息。如：密码，信用卡等。
HTML5 本地存储的用法
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的，区别在于 sessionStorage 在关闭页面后即被清空，而 localStorage 则会一直保存。我们这里以 localStorage 为例，简要介绍下 Html5 的本地存储，并针对如遍历等常见问题作一些示例说明。 localStorage 是 HTML5 本地存储的 API，使用键值对的方式进行存取数据，存取的数据只能是字符串。不同浏览器对该 API 支持情况有所差异，如使用方法、最大存储空间等。
1. localStorage API 基本使用方法
localStorage API 使用方法简单易懂，如下为常见的 API 操作及示例： 设置数据：localStorage.setItem(key,value); 示例：
for(var i=0; i<10; i++){
localStorage.setItem(i,i);
}
获取数据：localStorage.getItem(key) 获取全部数据：localStorage.valueOf() 示例：
for(var i=0; i<10; i++){
localStorage.getItem(i);
}
删除数据：localStorage.removeItem(key) 示例：
for(var i=0; i<5; i++){
localStorage.removeItem(i);
}
清空全部数据：localStorage.clear() 获取本地存储数据数量：localStorage.length 获取第 N 个数据的 key 键值：localStorage.key(N)
2. 遍历 key 键值方法
for(var i=localStorage.length - 1 ; i >=0; i--){
console.log('第'+ (i+1) +'条数据的键值为：' + localStorage.key(i) +'，数据为：' + localStorage.getItem(localStorage.key(i)));
}
3. 存储大小限制测试及异常处理
3.1 数据存储大小限制测试
不同浏览器对 HTML5 的本地存储大小基本均有限制，一个测试的结果如下：
IE 9 > 4999995 + 5 = 5000000
firefox 22.0 > 5242875 + 5 = 5242880
chrome 28.0 > 2621435 + 5 = 2621440
safari 5.1 > 2621435 + 5 = 2621440
opera 12.15 > 5M （超出则会弹出允许请求更多空间的对话框）
测试代码参考：
<!DOCTYPE html>
<html>
<head>
<script>
function log( msg ) {
console.log(msg);
alert(msg);
}
var limit;
var half = '1'; //这里会换成中文再跑一遍
var str = half;
var sstr;
while ( 1 ) {
try {
localStorage.clear();
str += half;
localStorage.setItem( 'cache', str );
half = str;
} catch ( ex ) {
break;
}
}
var base = str.length;
var off = base / 2;
var isLeft = 1;
while ( off ) {
if ( isLeft ) {
end = base - (off / 2);
} else {
end = base + (off / 2);
}
sstr = str.slice( 0, end );
localStorage.clear();
try {
localStorage.setItem( 'cache', sstr );
limit = sstr.length;
isLeft = 0;
} catch ( e ) {
isLeft = 1;
}
base = end;
off = Math.floor( off / 2 );
}
log( 'limit: ' + limit );
</script>
</html>
3.2 数据存储异常处理
try{
localStorage.setItem(key,value);
}catch(oException){
if(oException.name == 'QuotaExceededError'){
console.log('超出本地存储限额！');
//如果历史信息不重要了，可清空后再设置
localStorage.clear();
localStorage.setItem(key,value);
}
}
以上博客是转载，谢谢！
使用sessionStorage、localStorage存储数组与对象
先介绍一下localStorage
localStorage对象是HTML5的客户端存储持久化数据的方案。为了能访问到同一个localStorage对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上。
过期策略：localstorage永久存储，不过期，除非手动删除，sessionstorage在重启浏览器、关闭页面或新开页面时失效。
localStorage是Storage类型的实例。有以下的几种方法：
①clear（）：删除所有值。
②getItem（name）：根据指定的名字name获取对应的值
③key(index)：在指定的数字位置获取该位置的名字。
④removeItem（name）：删除由name指定的名值对
⑤setItem(name,value)：为指定名字设置一个对应的值
localStorage对象可以通过点号调用这些方法。
例：使用方法来存储数据
localStorage.setItem("name","songyuhua");//这样就用localStorage存储了一个名字为name的数据，数据的内容为 “songyuhua"
使用方法来读取数据
localStorage.getItem("name");//这样就读取了名字为“name”的数据的值。
有时候，我们需要将数据存储到sessionStorage和localStorage中，这样做的好处有：
1 缓存数据
2 减少对内存的占用
但是，storage只能存储字符串的数据，对于JS中常用的数组或对象却不能直接存储。
var obj = { name:'Jim' };
sessionStorage.obj = obj;
localStorage.obj = obj;
var arr = [1,2,3];
sessionStorage.obj = arr;
localStorage.obj = arr;
上面的写法都是不能成功的！但我们可以通过JSON对象提供的parse和stringify将其他数据类型转化成字符串，再存储到storage中就可以了。请看下面的代码。
var obj = { name:'Jim' };
var str = JSON.stringify(obj);
//存入
sessionStorage.obj = str;
//读取
str = sessionStorage.obj;
//重新转换为对象
obj = JSON.parse(str);
localStorage也一样，只是和sessionStorage的存储时间不一样。
需要注意的是，JS中的数组本质上也是对象类型，所以上面的代码对数组也是适用的。
var arra=[1,2,3,4];
localStorage.setItem('key',JSON.stringify(arra));
var read=JSON.parse(localStorage.getItem('key'));
console.log(read,read.length);
localStorage和sessionStorage区别
localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。
他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。
localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。
sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标 签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。
同源的判断规则：
http://www.test.com
https://www.test.com （不同源，因为协议不同）
http://my.test.com（不同源，因为主机名不同）
http://www.test.com:8080（不同源，因为端口不同）
localStorage和sessionStorage使用时使用相同的API：
localStorage.setItem("key","value");//以“key”为名称存储一个值“value”
localStorage.getItem("key");//获取名称为“key”的值
枚举localStorage的方法：
for(var i=0;i<localStorage.length;i++){
var name = localStorage.key(i);
var value = localStorage.getItem(name);
}
删除localStorage中存储信息的方法：
localStorage.removeItem("key");//删除名称为“key”的信息。
localStorage.clear();//清空localStorage中所有信息
通过getItem或直接使用localStorage["key"]获取到的信息均为实际存储的副本。
例如：
localStorage.key = {value1:"value1"};
localStorage.key.value1='a';
这里是无法对实际存储的值产生作用的，下面的写法也不可以：
localStorage.getItem("key").value1="a";
作者：Tyler Ning
出处：http://www.cnblogs.com/tylerdonet/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，如有问题，可以通过以下邮箱地址williamningdong@gmail.com
联系我，非常感谢。
使用HTML5 Web存储的localStorage和sessionStorage方式
localStorage（本地存储）,可以长期存储数据，没有时间限制，一天，一年，两年甚至更长，数据都可以使用。sessionStorage（会话存储），只有在浏览器被关闭之前使用，创建另一个页面时同意可以使用，关闭浏览器之后数据就会消失。
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的，区别在于 sessionStorage 在关闭页面后即被清空，而 localStorage 则会一直保存。我们这里以 localStorage 为例，简要介绍下 HTML5 的本地存储，并针对如遍历等常见问题作一些示例说明。 localStorage 是 HTML5 本地存储的 API，使用键值对的方式进行存取数据，存取的数据只能是字符串。不同浏览器对该 API 支持情况有所差异，如使用方法、最大存储空间等。
一、localStorage API 基本使用方法
localStorage API 使用方法简单易懂，如下为常见的 API 操作及示例： 设置数据：localStorage.setItem(key,value); 示例：
?
1
2
3
for(var i=0; i<10; i++){
localStorage.setItem(i,i);
}
获取数据：localStorage.getItem(key) 获取全部数据：localStorage.valueOf() 示例：
?
1
2
3
for(var i=0; i<10; i++){
localStorage.getItem(i);
}
删除数据：localStorage.removeItem(key) 示例：
?
1
2
3
for(var i=0; i<5; i++){
localStorage.removeItem(i);
}
清空全部数据：localStorage.clear() 获取本地存储数据数量：localStorage.length 获取第 N 个数据的 key 键值：localStorage.key(N)
2. 遍历 key 键值方法
?
1
2
3
for(var i=localStorage.length - 1 ; i >=0; i--){
console.log('第'+ (i+1) +'条数据的键值为：' + localStorage.key(i) +'，数据为：' + localStorage.getItem(localStorage.key(i)));
}
3. 存储大小限制测试及异常处理
3.1 数据存储大小限制测试
不同浏览器对 HTML5 的本地存储大小基本均有限制，一个测试的结果如下：
?
1
2
3
4
5
IE 9 > 4999995 + 5 = 5000000
firefox 22.0 > 5242875 + 5 = 5242880
chrome 28.0 > 2621435 + 5 = 2621440
safari 5.1 > 2621435 + 5 = 2621440
opera 12.15 > 5M （超出则会弹出允许请求更多空间的对话框）
测试代码参考：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
<script>
function log( msg ) {
console.log(msg);
alert(msg);
}</p>
<p> var limit;
var half = '1'; //这里会换成中文再跑一遍
var str = half;
var sstr;
while ( 1 ) {
try {
localStorage.clear();
str += half;
localStorage.setItem( 'cache', str );
half = str;
} catch ( ex ) {
break;
}
}
var base = str.length;
var off = base / 2;
var isLeft = 1;
while ( off ) {
if ( isLeft ) {
end = base - (off / 2);
} else {
end = base + (off / 2);
}</p>
<p> sstr = str.slice( 0, end );
localStorage.clear();
try {
localStorage.setItem( 'cache', sstr );
limit = sstr.length;
isLeft = 0;
} catch ( e ) {
isLeft = 1;
}</p>
<p> base = end;
off = Math.floor( off / 2 );
}</p>
<p> log( 'limit: ' + limit );
</script>
</html>
3.2 数据存储异常处理
?
1
2
3
4
5
6
7
8
9
10
try{
localStorage.setItem(key,value);
}catch(oException){
if(oException.name == 'QuotaExceededError'){
console.log('超出本地存储限额！');
//如果历史信息不重要了，可清空后再设置
localStorage.clear();
localStorage.setItem(key,value);
}
}
总结：
H5的两种存储技术的最大区别就是生命周期。localStorage是本地存储，存储期限不限；sessionStorage会话存储，页面关闭数据就会丢失。
使用方法：
localStorage.setItem（“key”，“value”）//存储
localStorage.getItem（key）//按key进行取值
localStorage.valueOf( )//获取全部值
localStorage.removeItem(key)//删除单个值
localStorage.clear()//删除全部数据
localStorage.length//获得数据的数量
localStorage.key(N)//获得第N个数据的key值
注：localStorage和sessionStorage用法相同
若转载请注明出处！若有疑问，请回复交流！
本地存储之localStorage
源码可以到GitHub上下载！
localStorage：
存储上限限制：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下。
localStorage与sessionStorage的区别:就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空
关闭浏览器后，再打开仍有数据
清除缓存加载后仍有数据
同网络地址页面均能得到数据
// localStorage使用示例
var username = document.getElementById("username"); // 获取input username
var userpwd = document.getElementById("userpassword"); // 获取input userpassword
var remember = document.getElementById("remember"); // 获取记住账号密码
// 点击复选框记住 账号、密码、复选框
function rememberValue() {
if (remember.checked == true) {
localStorage.setItem('user', username.value);
localStorage.setItem('pwd', userpwd.value);
localStorage.setItem('remember', remember.checked);
} else {
localStorage.removeItem("user");
localStorage.removeItem("pwd");
localStorage.removeItem("remember");
// localStorage.clear();// 全部删除
}
}
// 页面加载完毕后从localStorage里读取值并填入相应的标签内
window.onload = function () {
username.value = localStorage.getItem("user");
userpwd.value = localStorage.getItem("pwd");
remember.checked = localStorage.getItem("remember");
}
GitHub： Fuck me on GitHub
留下你的足迹求推荐呦
学习HTML笔记
实例解析：使用 key="sitename" 和 value="菜鸟教程" 创建一个 localStorage 键/值对。检索键值为 "sitename" 的值然后将数据插入 id="result" 的元素中。以上实例也可以这么写：// 存储localStorage.sitename = "菜鸟教程";// 查找document.getElementById("result").innerHTML = localStorage.sitename;移除 localStorage 中的 "sitename" :localStorage.removeItem("sitename");不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：保存数据：localStorage.setItem(key,value);读取数据：localStorage.getItem(key);删除单个数据：localStorage.removeItem(key);删除所有数据：localStorage.clear();得到某个索引的key：localStorage.key(index);提示: 键/值对通常以字符串存储，你可以按自己的需要转换该格式。下面的实例展示了用户点击按钮的次数。代码中的字符串值转换为数字类型:实例if (localStorage.clickcount){ localStorage.clickcount=Number(localStorage.clickcount)+1;}else{ localStorage.clickcount=1;}document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";
HTML5 本地缓存 （web存储）
首先自然是检测浏览器是否支持本地存储。在HTML5中，本地存储是一个window的属性，包括localStorage和 sessionStorage，从名字应该可以很清楚的辨认二者的区别，前者是一直存在本地的，后者只是伴随着session，窗口一旦关闭就没了。二者 用法完全相同，这里以localStorage为例。
if(window.localStorage){
alert('This browser supports localStorage');
}else{
alert('This browser does NOT support localStorage');
}
存储数据的方法就是直接给window.localStorage添加一个属性，例如：window.localStorage.a 或者 window.localStorage["a"]。它的读取、写、删除操作方法很简单，是以键值对的方式存在的，如下：
localStorage.a = 3;//设置a为"3"
localStorage["a"] = "sfsf";//设置a为"sfsf"，覆盖上面的值
localStorage.setItem("b","isaac");//设置b为"isaac"
var a1 = localStorage["a"];//获取a的值
var a2 = localStorage.a;//获取a的值
var b = localStorage.getItem("b");//获取b的值
localStorage.removeItem("c");//清除c的值
这里最推荐使用的自然是getItem()和setItem()，清除键值对使用removeItem()。如果希望一次性清除所有的键值对，可以使用clear()。另外，HTML5还提供了一个key()方法，可以在不知道有哪些键值的时候使用，如下：
var storage = window.localStorage;
function showStorage(){
for(var i=0;i<storage.length;i++){
//key(i)获得相应的键，再用getItem()方法获得对应的值
document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");
}
}
http://blog.sina.com.cn/s/blog_4515673f0100mm6m.html
http://www.w3school.com.cn/html5/html_5_webstorage.asp
本文转自 艺晨光 51CTO博客，原文链接：http://blog.51cto.com/ycgit/1857880，如需转载请自行联系原作者
HTML5本地存储之Web Storage
Web Storage是HTML5引入的一个非常重要的功能，可以在客户端本地存储数据，类似HTML4的cookie，但可实现功能要比cookie强大的多，cookie大小被限制在4KB，WebStorage官方建议为每个网站5MB。
Web Storage又分为两种：
sessionStorage
localStorage
从字面意思就可以很清楚的看出来，sessionStorage将数据保存在session中，浏览器关闭也就没了；而localStorage则一直将数据保存在客户端本地；
不管是sessionStorage，还是localStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：
· 保存数据：localStorage.setItem(key,value);
· 读取数据：localStorage.getItem(key);
· 删除单个数据：localStorage.removeItem(key);
· 删除所有数据：localStorage.clear();
· 得到某个索引的key：localStorage.key(index);
如上，key和value都必须为字符串，换言之，web Storage的API只能操作字符串,对于JS中常用的数组或对象却不能直接存储。
但我们可以通过JSON对象提供的parse和stringify将其他数据类型转化成字符串，再存储到storage中就可以了。请看下面的代码。
var obj = { name:'Jim' };
var str =JSON.stringify(obj);
//存入
localStorage.obj = str;
//读取
str = localStorage.obj;
//重新转换为对象
obj = JSON.parse(str);
localStorage语法很简单，而且我们不需要考虑具体的实现机制：
1 window.localStorage.getItem( key );
2 window.localStorage.setItem( key, value );
3 window.localStorage.removeItem( key );
4 window.localStorage.clear();
5 window.localStorage.length;
6 window.localStorage.key( i );
上述五个方法和一个属性是最常用、也够用的localStorage的接口，也是所有实现得最为统一的接口。更多其他使用方法，请自行百度查找，这里不一一列举。
Web Storage这个东西真正好：量大、永久存储、不用使用任何插件，不随http发送 … 用来保存一些用户非敏感的状态和信息是再合适不过的了。其浏览器兼容性如下：
可以看到，由于除IE外的其他浏览器很早的版本都支持了，关键是我们可以不用考虑这些浏览器的更低版本，所以基本上可以认为都已经支持了localStorage，而IE是个特例，虽然IE8就开始支持localStorage应该夸奖，但是其更低版本IE却都不支持，令人气馁的是，这些低版本浏览器在中国的占有率挺高…
这是一个微信案例。
https://mp.weixin.qq.com/s/0P6L80wvLBX-g9Onu2pxXA
将JS 存入了localStorage。
Web Storage
Web Storage 是一种简单的将JavaScript处理的数据永久保存的接口，它可以让我们不通过服务器进行数据的读写，可以很好的减少和服务器的通信，实现离线操作。
特点：
1、以键值对的形式存储
2、能够以普通JavaScript对象的方式进行读写
Web Storage提供了同源服务的共享内存，不同服务，只要源相同，就可以共享存储，大部分浏览器以5MB为上限，Web Storage 实体是全局对象中对已的localStorage和sessionStorage 两个对象，localStorage中保存的数据只要没被显式的删除，就不会丢失，sessionStorage保存数据仅在同一个会话中保留。
基本操作：
1、数据的读写：
可以通过setItem方法将数据存至localStorage中，并通过getItem方法引用数据，也可以通过相应的语法进行读取
//数据保存，以下3行等价
localStorage.setItem('foo','bar');
localStorage.foo='bar';
localStorage['foo']='bar';
//数据的引用，以下3行等价
var data= localStorage.getItem('foo');
var data= localStorage.foo;
var data= localStorage['foo'] localStorage只能对字符串进行读写，若要存储对象，可以使用JSON.stringfy和JSON.parse方法，进行相关转换
2、数据的删除：
可以通过removeItem方法删除，也可以通过相应的语法进行删除。
//删除数据
localStorage.removeItem('foo');
delete localStorage.foo;
delete localStorage['foo']; 若要一次性全部删除，可以使用clear方法。
3、数据的枚举
可以通过key方法和length属性来枚举localStorage中的数据，也可以通过for in语句枚举
//key方法和length枚举
for(var i=0;i<localStorage.length;i++) {
var key =localStorage.key(i),
value=localStorage[key];
}
//通过for in语句枚举
for(var key in localStorage) {
//使用直接属性
if(localStorage.hasOwnProperty(key)) {
var value=localStorage[key];
}
}
Web Storage中的storage事件：
在某一个窗口改变了Web Storage的数据后，就会在其他窗口触发storage事件，通过监听该事件，就能保证多个同时打开窗口间的数据一致性。
window.addEventListener('storage',function(event) {
if(event.key === 'userid'){
var msg = 'Hello '+ event.newValue;
document.getElementById('msg').textContent = msg;
}
},false);
命名空间的管理：
应该避免直接对于localStorage的数据添加，而是对于一个服务，创建该服务对应的命名空间，然后将其绑定到localStorage中
//以服务为单位进行命名空间管理
var SERVICE_NAME ='my service',
mystorage = null;
//通过load事件读取数据到本地变量
window.onload = function() {
try{
mystorage =JSON.parse(localStorage[SERVICE_NAME] || '{}');
}catch(e){
mystorage = {};
}
};
//通过beforeunload事件将数据写入localStorage
window.onbeforeunload = function() {
localStorage[SERVICE_NAME] = JSON.stringfy(storage);
}
此时，对于多个标签页的数据一致性问题，就需要在合适的时间，将本地变量写入localStorage中进行同步，并捕捉storage事件，在其他页执行更新操作，读到本地变量。
//写入localStorage
function setStorage(key,value){
storage[key] = value;
localStorage[SERVICE_NAME] =JSON.stringfy(storage);
}
//其他页内读入本地变量
window.onstorage= function(event) {
if(event.key === SERVICE_NAME && event.newValue){
storage = JSON.parse(event.newValue);
}
}
文章
2015-05-11
...
