`
dwj147258
  • 浏览: 194010 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

storage详解

    博客分类:
  • js
阅读更多

在HTML5出现之前,如果开发者需要在客户端存储少量的数据,只能通过cookie来实现,但是cookie存在几个不足点:

 •每个域名下cookie的大小限制在4KB。
 •cookie会包含在每个http请求中,这样会导致发送重复的数据。
 •cookie在网络传输过程中没有加密,存在安全隐患。

在HTML5新增了Web storage功能,Web Storage官方建议为每个网站是5MB,能存储比cookie更多的数据,并且具有比cookie更强大的功能。Web Storage现在已经得到了Firefox、Opera、Chrome、Safari各主流浏览器的支持。
 
Web Storage简介

Web Storage又分为Session Storage和Local Storage:

Session Storage:与session类似,Session Storage保存的数据生存期限与Session期限相同,用户Session结束时,Session Storage保存的数据也就消失了。

Local Storage: Local Storage保存的数据一直在本地,除非用户或程序显式地清楚,否则这些数据会一致存在。

window对象中提供了sessionStorage和localStorage两个属性,这两个属性分别代表了Session Storage和Local Storage。这个两个功能和用法几乎是相同的,只是它们保存数据的生存期限不同而已。storage提供了以下属性和方法(以localStorage为例): 

 •localStorage.length:获取key-value对的数目;
 •localStorage.key(index):获取第index索引的key;
 •localStorage.getItem(key):获取指定key对应的value;
 •localStorage.setItem(key,value):保存指定的key-value对;
 •localStorage.removeItem(key):删除指定key对应的key-value对;
 •localStorage.clear():删除所有key-value对。
 
需要注意的是,key和value都必须为字符串,换言之,web Storage的API只能操作字符串。那么一些不是字符串的数据,我们可以通过JSON等方式将其转化成字符串格式后在操作。

Web Storage用JSON存储多个数据

我们通过一个小程序来熟悉一下相关属性和方法的基本用法:

 •录入学生的基本信息(包括学号,姓名,年级,性别),以学号为key值来存储到local storage中;
 •通过学号来查询学生的基本信息;
 •显示全部学生的信息;
 
首先我们设计HTML页面

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>HTML本地存储之web storage</title>  
  6.     <style type="text/css">  
  7.         #content{   
  8.             border: 1px solid #3D19DD;   
  9.             width:600px;   
  10.             text-align:center;   
  11.             padding: 10px 0;   
  12.             margin: 0 auto;   
  13.         }   
  14.         #content input{   
  15.             margin-top: 10px;   
  16.         }   
  17.     </style>  
  18. </head>  
  19. <body>  
  20.     <div id="content">  
  21.          <label for="user_num">学号:</label>     
  22.         <input type="text" id="user_num" name="user_num" />  
  23.         <br/>  
  24.         <label for="user_name">姓名:</label>     
  25.         <input type="text" id="user_name" name="user_name" />     
  26.         <br/>     
  27.         <label for="grade">年级:</label>     
  28.         <input type="text" id="grade" name="grade"/>     
  29.         <br/>     
  30.         <label for="sex">性别:</label>     
  31.         <input type="text" id="sex" name="sex"/>     
  32.         <br/>    
  33.         <input type="button" onclick="save()" value="添加名单"/>     
  34.         <hr/>     
  35.         <label for="search_num">输入学号:</label>     
  36.         <input type="text" id="search_num" name="search_num"/>     
  37.         <input type="button" onclick="find()" value="查找学生信息"/>     
  38.         <p id="find_result"><br/></p>  
  39.         <hr/>  
  40.          <input type="button" onclick="show()" value="显示所有">    
  41.          <div id="list">     
  42.          </div>    
  43.     </div>     
  44.     <br />             
  45. </body>  
  46. </html>  

通过JS实现学生信息保存到local storage中,通过分析我们发现需要保存的学生信息包括多个字段,这时,我们可以利用JSON的stringify()方法,将复杂对象转变成字符串,存入Web Storage中;当从Web Storage中读取时,可以通过JSON的parse()方法再转换成JSON对象:

JavaScript Code复制内容到剪贴板
  1. function save(){     
  2.         var user_num = document.getElementById("user_num").value;   
  3.         var user_nameElement = document.getElementById("user_name").value;   
  4.         var gradeElement = document.getElementById("grade").value;     
  5.         var sexElement = document.getElementById("sex").value;   
  6.         var msg = {   
  7.             user_name: user_nameElement,   
  8.             grade: gradeElement,   
  9.             sex: sexElement,   
  10.         };    
  11.         localStorage.setItem(user_num,JSON.stringify(msg));     
  12.     }   
  13.   

我们往localStorage里存入三条学生信息,并查看localStorage中的存储信息:

用JS实现通过学号查找学生信息时,需要注意取出的value值为JSON字符串,需要通过JSON的parse()方法再转换成JSON对象,代码如下:

JavaScript Code复制内容到剪贴板
  1. function find(){     
  2.         var user_num = document.getElementById("search_num").value;    
  3.         var str = localStorage.getItem(user_num);    
  4.         var msg = JSON.parse(str);    
  5.         var find_result = document.getElementById("find_result");     
  6.         find_result.innerHTML = "学号为:"+user_num+"的基本信息: 姓名:"+msg.user_name + ",年级:" + msg.grade+",性别:"+msg.sex;     
  7.     }    
  8.   

 同理,显示全部学生信息时,也一样需要将取出的value字符串转换成JSON对象:

JavaScript Code复制内容到剪贴板
  1. function show(){     
  2.         var list = document.getElementById("list");     
  3.         if(localStorage.length>0){     
  4.             var result = "<table border='1' style='width:300px; margin:0 auto;'>";     
  5.             result += "<tr><td>学号</td><td>姓名</td><td>年级</td><td>性别</td></tr>";     
  6.             for(var i=0;i<localStorage.length;i++){     
  7.                 var user_num = localStorage.key(i);     
  8.                 var str = localStorage.getItem(user_num);     
  9.                 var msg = JSON.parse(str);     
  10.                 result += "<tr><td>"+user_num+"</td><td>"+msg.user_name+"</td><td>"+msg.grade+"</td><td>"+msg.sex+"</td></tr>";     
  11.             }     
  12.             result += "</table>";     
  13.             list.innerHTML = result;     
  14.           }else{     
  15.                 list.innerHTML = "当前还没有数据";     
  16.           }     
  17.     }      
  18.   

 最后的效果图如下:

 

Web Storage存储图片

前面我们已经提到过,本地存储只支持字符串的存取,那么我们要做的就是将图片转换成 Data URI 。其中一种实现方式就是用canvas元素来加载图片。然后你可以以Data URI的形式从canvas中读取图片。 
保存图片的函数如下:

JavaScript Code复制内容到剪贴板
  1. function setImg(key,src){   
  2.         var img = document.createElement('img');   
  3.         //当图片加载完成的时候触发回调函数   
  4.         img.addEventListener("load",function(){   
  5.             var imgCanvas = document.createElement("canvas"),   
  6.             imgContext = imgCanvas.getContext("2d");   
  7.         //确保canvas元素大小和图片的尺寸一致   
  8.         imgCanvas.width = this.width;   
  9.         imgCanvas.height = this.height;   
  10.         //渲染图片到canvas中   
  11.         imgContext.drawImage(this,0,0,this.width,this.height);   
  12.   
  13.         //用data url的形式取出   
  14.         img.crossOrigin = "*"//防止跨域取照片出错   
  15.         var imgAsDataURL = imgCanvas.toDataURL("image/png");   
  16.   
  17.         //保存到本地存储中   
  18.         try{   
  19.             localStorage.setItem(key, imgAsDataURL);   
  20.         }   
  21.         catch(e){   
  22.             alert("保存失败!请重试。。。");   
  23.         }   
  24.   
  25.         }, false);   
  26.         img.src = src;   
  27.     }   
  28.   

该函数接收两个参数,一个是key值,还有一个是图片的路径,通过setImg(“img1”,”1.jpg”)保存图片到localStorage,我们可以查看Local Storage的存储情况:

获取并显示的代码函数如下:

JavaScript Code复制内容到剪贴板
  1. function getImg(key){   
  2.         var srcStr = localStorage.getItem(key);   
  3.         var imgObj = document.createElement('img');   
  4.         imgObj.src = srcStr;   
  5.         document.body.appendChild(imgObj);   
  6.     }   
  7.   

该函数只接收一个参数:需要查找图片的key值:

以上就是本文的全部内容

分享到:
评论

相关推荐

    pandas-1.3.5-cp37-cp37m-macosx_10_9_x86_64.zip

    pandas whl安装包,对应各个python版本和系统(具体看资源名字),找准自己对应的下载即可! 下载后解压出来是已.whl为后缀的安装包,进入终端,直接pip install pandas-xxx.whl即可,非常方便。 再也不用担心pip联网下载网络超时,各种安装不成功的问题。

    基于java的大学生兼职信息系统答辩PPT.pptx

    基于java的大学生兼职信息系统答辩PPT.pptx

    基于java的乐校园二手书交易管理系统答辩PPT.pptx

    基于java的乐校园二手书交易管理系统答辩PPT.pptx

    tornado-6.4-cp38-abi3-musllinux_1_1_i686.whl

    tornado-6.4-cp38-abi3-musllinux_1_1_i686.whl

    Android Studio Ladybug(android-studio-2024.2.1.10-mac.zip.002)

    Android Studio Ladybug 2024.2.1(android-studio-2024.2.1.10-mac.dmg)适用于macOS Intel系统,文件使用360压缩软件分割成两个压缩包,必须一起下载使用: part1: https://download.csdn.net/download/weixin_43800734/89954174 part2: https://download.csdn.net/download/weixin_43800734/89954175

    基于ssm框架+mysql+jsp实现的监考安排与查询系统

    有学生和教师两种角色 登录和注册模块 考场信息模块 考试信息模块 点我收藏 功能 监考安排模块 考场类型模块 系统公告模块 个人中心模块: 1、修改个人信息,可以上传图片 2、我的收藏列表 账号管理模块 服务模块 eclipse或者idea 均可以运行 jdk1.8 apache-maven-3.6 mysql5.7及以上 tomcat 8.0及以上版本

    tornado-6.1b2-cp38-cp38-macosx_10_9_x86_64.whl

    tornado-6.1b2-cp38-cp38-macosx_10_9_x86_64.whl

    Android Studio Ladybug(android-studio-2024.2.1.10-mac.zip.001)

    Android Studio Ladybug 2024.2.1(android-studio-2024.2.1.10-mac.dmg)适用于macOS Intel系统,文件使用360压缩软件分割成两个压缩包,必须一起下载使用: part1: https://download.csdn.net/download/weixin_43800734/89954174 part2: https://download.csdn.net/download/weixin_43800734/89954175

    基于MATLAB车牌识别代码实现代码【含界面GUI】.zip

    matlab

    基于java的毕业生就业信息管理系统答辩PPT.pptx

    基于java的毕业生就业信息管理系统答辩PPT.pptx

    基于Web的毕业设计选题系统的设计与实现(springboot+vue+mysql+说明文档).zip

    随着高等教育的普及和毕业设计的日益重要,为了方便教师、学生和管理员进行毕业设计的选题和管理,我们开发了这款基于Web的毕业设计选题系统。 该系统主要包括教师管理、院系管理、学生管理等多个模块。在教师管理模块中,管理员可以新增、删除教师信息,并查看教师的详细资料,方便进行教师资源的分配和管理。院系管理模块则允许管理员对各个院系的信息进行管理和维护,确保信息的准确性和完整性。 学生管理模块是系统的核心之一,它提供了学生选题、任务书管理、开题报告管理、开题成绩管理等功能。学生可以在此模块中进行毕业设计的选题,并上传任务书和开题报告,管理员和教师则可以对学生的报告进行审阅和评分。 此外,系统还具备课题分类管理和课题信息管理功能,方便对毕业设计课题进行分类和归档,提高管理效率。在线留言功能则为学生、教师和管理员提供了一个交流互动的平台,可以就毕业设计相关问题进行讨论和解答。 整个系统设计简洁明了,操作便捷,大大提高了毕业设计的选题和管理效率,为高等教育的发展做出了积极贡献。

    机器学习(预测模型):2000年至2015年期间193个国家的预期寿命和相关健康因素的数据

    这个数据集来自世界卫生组织(WHO),包含了2000年至2015年期间193个国家的预期寿命和相关健康因素的数据。它提供了一个全面的视角,用于分析影响全球人口预期寿命的多种因素。数据集涵盖了从婴儿死亡率、GDP、BMI到免疫接种覆盖率等多个维度,为研究者提供了丰富的信息来探索和预测预期寿命。 该数据集的特点在于其跨国家的比较性,使得研究者能够识别出不同国家之间预期寿命的差异,并分析这些差异背后的原因。数据集包含22个特征列和2938行数据,涉及的变量被分为几个大类:免疫相关因素、死亡因素、经济因素和社会因素。这些数据不仅有助于了解全球健康趋势,还可以辅助制定公共卫生政策和社会福利计划。 数据集的处理包括对缺失值的处理、数据类型转换以及去重等步骤,以确保数据的准确性和可靠性。研究者可以使用这个数据集来探索如教育、健康习惯、生活方式等因素如何影响人们的寿命,以及不同国家的经济发展水平如何与预期寿命相关联。此外,数据集还可以用于预测模型的构建,通过回归分析等统计方法来预测预期寿命。 总的来说,这个数据集是研究全球健康和预期寿命变化的宝贵资源,它不仅提供了历史数据,还为未来的研究和政策制

    基于微信小程序的高校毕业论文管理系统小程序答辩PPT.pptx

    基于微信小程序的高校毕业论文管理系统小程序答辩PPT.pptx

    基于java的超市 Pos 收银管理系统答辩PPT.pptx

    基于java的超市 Pos 收银管理系统答辩PPT.pptx

    基于java的网上报名系统答辩PPT.pptx

    基于java的网上报名系统答辩PPT.pptx

    基于java的网上书城答辩PPT.pptx

    基于java的网上书城答辩PPT.pptx

    婚恋网站 SSM毕业设计 附带论文.zip

    婚恋网站 SSM毕业设计 附带论文 启动教程:https://www.bilibili.com/video/BV1GK1iYyE2B

    基于java的戒烟网站答辩PPT.pptx

    基于java的戒烟网站答辩PPT.pptx

    基于微信小程序的“健康早知道”微信小程序答辩PPT.pptx

    基于微信小程序的“健康早知道”微信小程序答辩PPT.pptx

    机器学习(预测模型):自行车共享使用情况的数据集

    Capital Bikeshare 数据集是一个包含从2020年5月到2024年8月的自行车共享使用情况的数据集。这个数据集记录了华盛顿特区Capital Bikeshare项目中自行车的租赁模式,包括了骑行的持续时间、开始和结束日期时间、起始和结束站点、使用的自行车编号、用户类型(注册会员或临时用户)等信息。这些数据可以帮助分析和预测自行车共享系统的需求模式,以及了解用户行为和偏好。 数据集的特点包括: 时间范围:覆盖了四年多的时间,提供了长期的数据观察。 细节丰富:包含了每次骑行的详细信息,如日期、时间、天气条件、季节等,有助于深入分析。 用户分类:数据中区分了注册用户和临时用户,可以分析不同用户群体的使用习惯。 天气和季节因素:包含了天气情况和季节信息,可以研究这些因素对骑行需求的影响。 通过分析这个数据集,可以得出关于自行车共享使用模式的多种见解,比如一天中不同时间段的使用高峰、不同天气条件下的使用差异、季节性变化对骑行需求的影响等。这些信息对于城市规划者、交通管理者以及自行车共享服务提供商来说都是非常宝贵的,可以帮助他们优化服务、提高效率和满足用户需求。同时,这个数据集也

Global site tag (gtag.js) - Google Analytics