4.4 Web存储

HTML5:

<1> localStorage 没有时间限制

<2> sessionStorage 针对session数据存储, 浏览器关闭则失效

cookie缺点: cookie不适合大量数据存储

<1> localStorage

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>localStorage</title>
    <script src="myjavascript.js"></script>
</head>
<body>
    <textarea id="ta" style="width:200px; height: 200px"></textarea>
    <button id="btn">save</button>
</body>
</html>
var ta;
var button;

window.onload = function(){
    ta = document.getElementById("ta");
    if(localStorage.text)
        ta.value = localStorage.text;

    button = document.getElementById("btn");
    button.onclick = function () {
        localStorage.text = ta.value;
    }
}

  点击save按钮之后, 刷新页面, 甚至关闭浏览器再打开此页面都会显示mirror

2. sessionStorage

  跟上面类似

时间: 2024-11-03 21:20:14

4.4 Web存储的相关文章

【温故而知新-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

web存储

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Lik - web存储</title> </head> <body> <script type="text/javascript"> window.onload = function() { //定义一个数组 var arr = []; fo

客户端存储之HTML5 web存储

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

关于web存储

web存储有很多种,具体的运用要看具体的情况. 我们先来看第一种: 这是html代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>sessionStorage</title> </head> <body> <label for="in1">键值名

HTML5新增web存储方式

客户端存储数据的两个对象为: 两个对象在使用方式没有任何区别,唯一的不同点蚀储存数据 的有效时间 ①localStorage - 没有时间限制的数据存储 除非手动删除,否则数据将一直保存在本地文件: ②sessionStorage - 针对一个 session 的数据存储 当浏览器关闭时,sessionStorage就被清空: 在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage: [Storage的数据存储] 1.Storage可以像普通对象一

HTML5 02. 多媒体控件、拖拽事件、历史记录、web存储、应用程序缓存、地理定位、网络状态

多媒体 video:是行内块(text-align: center; 对行内块适用) <figure></figure>: 多媒体标签 : <figcaption></figcaption>: 多媒体标题 方法: load() 加载.play()播放.pause()暂停 属性: currentTime 视频播放的当前进度. duration:视频的总时间. paused:视频播放的状态 事件:   oncanplay:事件在用户可以开始播放视频/音频(aud

HTML5 Web 存储

localStorage 和 sessionStorage 客户端存储数据的两个对象为: localStorage - 没有时间限制的数据存储 localStorage 对象 localStorage 对象存储的数据没有时间限制.第二天.第二周或下一年之后,数据依然可用. sessionStorage - 针对一个 session 的数据存储 sessionStorage 方法针对一个 session 进行数据存储.当用户关闭浏览器窗口后,数据会被删除. 如何创建并访问一个 sessionSto