localstorage - HTML 5 Web 存储总结---【凡尘】

001、localStorage概念

在html5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储,解决了cookie存储空间不足的问题(cookie中每条cookie存储空间为4K),localStorage支持5M大小。

002、localStorage的局限


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



2、localStorgae的值类型限定为String类型,我们需要JSON.parse() JSON.Stringify()进行转换



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



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



5、localStorage不能被爬虫抓取到

003、localStorage的设置

localStorage.name = "凡尘";

localStorage["name"] = "凡尘";

localStorage.setItem("name","凡尘")

004、localStorage的读取

var nameval = localStorage.name;console.log(nameval);

var nameval = localStorage["name"];console.log(nameval);

var nameval = localStorage.getItem("name")

005、localStorage的获取

使用key()方法,向其中输入索引即可获取对应的键值

localStorage.a = "1";

localStorage["b"] = "2";

localStorage.setItem("c","3");

for(var i=0;i<localStorage.length;i++){  var key = localStorage.key(i);  console.log(key)}

006、localStorage的删除

删除所有:  localStorage.clear();

删除某一个值  localStorage.removeItem(key)
时间: 2024-11-13 00:04:08

localstorage - HTML 5 Web 存储总结---【凡尘】的相关文章

客户端存储之HTML5 web存储

最近在学习如何实现客户端存储,这篇文章将主要分析H5的web storage以及它与传统的cookie之间的区别. web存储与cookie的区别以及优势: 1.cookie只适合存储少量文本数据,而web存储可存储大量数据 2.以cookie存储的数据,无论服务器端是否需要,每次HTTP请求时,都会将cookie数据传送到服务端,有时会造成带宽浪费,而web storage 中的数据只会存储在本地 3.web storage有更加丰富易用的接口,比如setItem().getItem().re

Html5之高级-13 Web存储API (两个存储系统、sessionStorage、localStorage)

一.两个存储系统 两个存储系统 - 万维网最初的设想,是作为展示信息的一种方式.信息处理是后来才出现的,但是Web的实质并没有变---信息在服务器上处理,然后显示给用户.因为系统没有利用计算机资源,所以复杂操作都是在服务器上完成的 - 对于任何程序来说,能够实现数据存储是必备功能之一,并且在需要的时候能够提供数据.但在过去的Web用户端,没有能够支持数据存储的有效机制 - cookie曾用来在客户端存储少量信息,但受其性质所限,cookie只能存储一些短的字符串 - 在 HTML5中提供了 We

Web存储机制—sessionStorage,localStorage使用方法

Web存储机制,在这里主要聊有关于Web Storage API提供的存储机制,通过该机制,浏览器可以安全地存储键值对,比使用cookie更加直观.接下来简单的了解如何使用这方面的技术. 基本概念 Web Storage 包含两种机制: sessionStorage为每一个给定的源维持一个独立的存储区域,该区域在页面会话期间可用(即只要浏览器处于打开状态,包括页面重新加载和恢复) localStorage同样的功能,但是在浏览器关闭,然后重新打开后数据仍然存在 这两种机制是通过Window.se

web存储机制(localStorage和sessionStorage)

web存储包括两种:sessionStorage 和 localStorage(都是限定在文档源级别,非同源文档间无法共享) 1.sessionStorage 数据放在服务器上(IE不支持) 严格用于一个浏览器会话中存储数据,数据在浏览器关闭后会立即删除 2.localStorage 数据在客户端(低版本IE ( IE6, IE7 ) 不支持,并且不支持查询语言) 跨会话持久化地存储数据 localStorage与sessionStorage的区别: localStorage只要在相同的协议.相

使用HTML5 Web存储的localStorage和sessionStorage方式

localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同意可以使用,关闭浏览器之后数据就会消失. HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存.我们这里以 localStora

【温故而知新-Javascript】使用Web存储

Web存储允许我们在浏览器里保存简单的键/值数据.Web存储和cookie很相似,但它有着更好的实现方式,能保存的数据量也很大.这两种类型共享相同的机制,但是被保存数据的可见性和寿命存在区别. PS:还有一种存储规范名为“索引数据库API”(Indexed Database API),它允许保存富格式数据和进行SQL风格的查询. 1.使用本地存储 我们可以通过全局属性 localStorage访问本地存储功能.这个属性会返回一个Storage 对象,下表对其进行了介绍.Storage 对象被用来

Web 存储简介

什么是 Web 存储? Web 存储通常与 HTTP Cookie 相仿.与 Cookie 类似,Web开发人员可以将每次会话或域特定的数据作为名称/值对存储在使用 Web 存储的客户端上.但是,与 Cookie不同的是,在控制某个窗口存储的信息如何向其他窗口显示时,Web 存储要更为简单. 例如,用户可能会打开两个浏览器窗口,购买两个不同航班的机票.然而,如果航空公司的 Web 应用程序使用 Cookie存储其会话状态,那么相关信息可能会从一笔交易“泄露”至另一笔交易,进而导致用户可能在未得到

浅谈web存储

1.先来说说之前的客户端存储吧~在html5出来之前~客户端存储主要是使用cookie~不过这种古老的方式存在着好一些弊端~举例如下: 可以存储的数据的大小受到限制~官方指出一个域名下最多可以存储4k的数据(有点少吧~~) cookie的数据放到了http请求头上~这样不仅使得http请求头变得臃肿~过多的cookie会使请求越来越慢~同时还带来了安全的问题~这玩意默认是明文的 同时注意cookie是会过期的~ 2.还有一种存储方式是userData~但是这个只有ie支持~考虑到平台的限制~此处

HTML5 鼠标拖拽以及web存储

html5 拖拽: (function(){}())执行匿名函数,要用括号包括起来: 1:用鼠标事件来做拖拽: 2:在HTML5中加入draggable="true",就可以拖拽但是是分成了两个,这个更有效率: ondragstart:拖拽开始: ondrag:拖拽中 ondragend:拖拽结束: ondragenter:进入投放去: ondragover:投放区移动: ondragleave:离开投放区: ondrop:投放区投放:           ondragover会阻止d