HTML5 localStorage使用教程

在客户端存储数据，HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

localStorage的使用遵循同源策略，对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

localStorage解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

localStorage的优势

1、localStorage拓展了cookie的4K限制

2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

localStorage的局限

1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性

2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换

3、localStorage在浏览器的隐私模式下面是不可读取的

4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

5、localStorage不能被爬虫抓取到

localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空

localStorage使用实例1：

 //localStorage的浏览器支持情况：

 //1. 判断浏览器是否支持localStorage这个属性

 if(！window.localStorage){

     alert("浏览器支持localstorage");

     return false;

 }else{

     //主逻辑业务

 }

 //localStorage的写入、修改、删除、读取

 if(！window.localStorage){

     alert("浏览器支持localstorage");

     return false;

 }else{

     var storage=window.localStorage;

     //写入或修改a字段

     storage["a"]=1;

     //写入或修改b字段

     storage.b=1;

     //写入或修改c字段

     storage.setItem("c",3);

     console.log(typeof storage["a"]); //string

     console.log(typeof storage["b"]); //string

     console.log(typeof storage["c"]); //string

     //localStorage的键获取

     for(var i=0;i<storage.length;i++){

         //使用key()方法，向其中出入索引即可获取对应的键

         var key=storage.key(i);

         console.log(key);

     }

     //存储json

     //localStorage只支持string类型的存储。

     /*

     一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式

 这个时候我们可以使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串

     */

     var data={

         name:'xiecanyong',

         sex:'man',

         hobby:'program'

     };

     var d=JSON.stringify(data);

     storage.setItem("data",d);

     console.log(storage.data);

     //读取之后使用JSON.parse()方法将JSON字符串转换成为JSON对象，

     //将localStorage中的某个键值对删除

     storage.removeItem("a");

     //将localStorage的所有内容清除

     storage.clear();

 }

localStorage使用实例2：

 <!doctype html>

 <html lang="en">

 <head>

 <meta charset="UTF-8" />

 <title>Document</title>

 </head>

 <body>

 <script type="text/javascript">

     window.onload = function() {

         if(window.localStorage){

             //主逻辑业务

             window.localStorage.clear(); //清除所有的变量和值

             window.localStorage.a = 100;

             window.localStorage["b"] = 200;

             window.localStorage.setItem("c", 300);

             console.log("window.localStorage.a=" + window.localStorage.a);

             console.log("window.localStorage['b']=" + window.localStorage["b"]);

             console.log("window.localStorage.getItem('c')=" + window.localStorage.getItem("c"));

             console.log(window.localStorage);

             console.log(typeof window.localStorage);

             for (var i = 0; i < window.localStorage.length; i++) {

                 var key1 = window.localStorage.key(i);

                 var key2 = window.localStorage.getItem(key1);

                 console.log("字段名：" + key1 + "       值：" + key2);

             }

             console.log(typeof window.localStorage.a);

             console.log(typeof window.localStorage['b']);

             console.log(typeof window.localStorage.getItem('c'));

             console.log("空了：" + window.localStorage);

             window.localStorage.SB = "我是你大爷!";

             window.localStorage.aaa = "this is test!";

             window.localStorage.removeItem("aaa");

             console.log("-------------------------------------------------");

             var storage = window.localStorage;

             var data = {

                 name: 'xiecanyong',

                 sex: 'man',

                 hobby: 'program'

             };

             var d = JSON.stringify(data);

             console.log(typeof d);

             storage.setItem("data", d);

             console.log(storage.data);

             var json = storage.getItem("data");

             var jsonObj = JSON.parse(json);

             console.log(typeof jsonObj);

             console.log(storage.data);

         }else{

             alert("浏览器不支持localstorage");

             return false;

         }

     }

 </script>

 </body>

 </html>

纯文字版代码1：

//localStorage的浏览器支持情况：

//1. 判断浏览器是否支持localStorage这个属性
if(！window.localStorage){
alert("浏览器支持localstorage");
return false;
}else{
//主逻辑业务
}

//localStorage的写入、修改、删除、读取

if(！window.localStorage){
alert("浏览器支持localstorage");
return false;
}else{
var storage=window.localStorage;
//写入或修改a字段
storage["a"]=1;
//写入或修改b字段
storage.b=1;
//写入或修改c字段
storage.setItem("c",3);
console.log(typeof storage["a"]); //string
console.log(typeof storage["b"]); //string
console.log(typeof storage["c"]); //string
//localStorage的键获取
for(var i=0;i<storage.length;i++){
//使用key()方法，向其中出入索引即可获取对应的键
var key=storage.key(i);
console.log(key);
}
//存储json
//localStorage只支持string类型的存储。
/*
一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式
这个时候我们可以使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串
*/
var data={
name:'xiecanyong',
sex:'man',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
console.log(storage.data);
//读取之后使用JSON.parse()方法将JSON字符串转换成为JSON对象，

//将localStorage中的某个键值对删除
storage.removeItem("a");
//将localStorage的所有内容清除
storage.clear();
}

纯文字版代码2：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>

<body>
<script type="text/javascript">
window.onload = function() {

if(window.localStorage){
//主逻辑业务
window.localStorage.clear(); //清除所有的变量和值
window.localStorage.a = 100;
window.localStorage["b"] = 200;
window.localStorage.setItem("c", 300);

console.log("window.localStorage.a=" + window.localStorage.a);
console.log("window.localStorage['b']=" + window.localStorage["b"]);
console.log("window.localStorage.getItem('c')=" + window.localStorage.getItem("c"));

console.log(window.localStorage);
console.log(typeof window.localStorage);
for (var i = 0; i < window.localStorage.length; i++) {
var key1 = window.localStorage.key(i);
var key2 = window.localStorage.getItem(key1);
console.log("字段名：" + key1 + " 值：" + key2);
}

console.log(typeof window.localStorage.a);
console.log(typeof window.localStorage['b']);
console.log(typeof window.localStorage.getItem('c'));

console.log("空了：" + window.localStorage);
window.localStorage.SB = "我是你大爷!";
window.localStorage.aaa = "this is test!";
window.localStorage.removeItem("aaa");

console.log("-------------------------------------------------");
var storage = window.localStorage;
var data = {
name: 'xiecanyong',
sex: 'man',
hobby: 'program'
};
var d = JSON.stringify(data);
console.log(typeof d);
storage.setItem("data", d);
console.log(storage.data);

var json = storage.getItem("data");
var jsonObj = JSON.parse(json);
console.log(typeof jsonObj);
console.log(storage.data);
}else{
alert("浏览器不支持localstorage");
return false;
}
}
</script>
</body>

</html>

done!

HTML5 localStorage使用教程的更多相关文章

HTML5 LocalStorage 本地存储
HTML5 LocalStorage 本地存储说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就 ...
(转载)HTML5 LocalStorage 本地存储
原文地址:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储说到本地 ...
[js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API
我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...
[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)
之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...
[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)
绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画 ...
[js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)
接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...
[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)
接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...
[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)
上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...
[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)
接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现 ...

随机推荐

JavaScript In OA Framework
原文地址:JavaScript In OA Framework (需FQ) “To be or not to be…… is the question…..!” The famous soliloqu ...
spring中@Scope作用域的注解
@Scope简单点说就是用来指定bean的作用域官方解释是:scope用来声明IOC容器中的对象应该处的限定场景或者说该对象的存活空间,即在IOC容器在对象进入相应的scope之前,生成并装配这些对 ...
78. Subsets 90. Subsets II
1. Given a set of distinct integers, nums, return all possible subsets. Note: Elements in a subset m ...
JVM笔记(二) 垃圾收集器(1)
垃圾收集器主要通过阅读<深入了解Java虚拟机>(周志明著)和网络资源汇集而成,为本人学习JVM的笔记.同时,本文理论基于JDK 1.7版本,暂不考虑 1.8和1.9 的新特性,但可能 ...
BZOJ1670 [Usaco2006 Oct]Building the Moat护城河的挖掘
裸的凸包...(和旋转卡壳有什么关系吗...蒟蒻求教T T) 话说忘了怎么写了...(我以前都是先做上凸壳再做下凸壳的说) 于是看了下hzwer的写法,用了向量的点积,方便多了,于是果断学习(Orz) ...
MongoDB中_id(ObjectId)生成
MongoDB 中我们经常会接触到一个自动生成的字段:"_id",类型为ObjectId. 之前我们使用MySQL等关系型数据库时,主键都是设置成自增的.但在分布式环境下,这种方法 ...
Spring Data JPA之@Query注解
比如有个实体类对象,类名为Book,对应数据表的表名为book 1. 一个使用@Query注解的简单例子:占位符?1和?2 @Query(value = "select name,autho ...
读书笔记 C# Linq查询之group关键字浅析
在C#中,自从有了Linq查询表达式后,程序员对可被迭代的序列或列表执行一系列的筛选.排序.过滤.分组.查询等操作.本文章所要讲述的是group关键字. Linq查询表达式,是以from关键字开头,以 ...
sql server 的游标
-- sql server 中的游标 --声明游标 /* declare cursorname [insensitive] [scroll] cursor for <select-查询块> ...
linux定时任务：crontab命令
crontab命令被用来提交和管理用户的需要周期性执行的任务,与windows下的计划任务类似,当安装完成操作系统后,默认会安装此服务工具,并且会自动启动crond进程,crond进程每分钟会定期检查 ...

HTML5 localStorage使用教程

HTML5 localStorage使用教程的更多相关文章

随机推荐

热门专题