本地存储 localStorage/sessionStorage/cookie
cookie是个基础的东西。是服务器发送到客户端,存储在客户端的一小段数据。可以存储一些配置信息,客户标识信息等。
用户下次访问这个网站时,会把上次网站发来的cookie一同发送回去。
cookie保存在客户端,服务器能够知道其中的信息。
session保存在服务器,客户端不知道其中的信息;
一、、h5之前,web本地存储都是由cookie完成,缺点:不适合大量数据存储2
与服务器的请求,速度慢,效率低。
二、h5提供了两种在客户端存储数据的新方法:
1、localStorage:无时间限制,除非手工删除。
2、sessionStorage:会话存储,浏览器关闭就销毁了。
localstorage是window的一个属性,因此,通常都是写window.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的值
localStorage.clear(); // 清除了所有
Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。
除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。
但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生(来自@otakustay 的纠正)
案例1
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>.html</title>
<style>
</style>
<script src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
localStorage.setItem("aa",$("#text").val());
});
$("#btn2").click(function(){
$("#msg").html(localStorage.getItem("aa"));
});
});
</script>
</head>
<body>
<div id="msg" style="margin: 10px 0; border: 1px solid black; padding: 10px; width: 300px;
height: 100px;">
</div>
<input type="text" id="text" />
<button id="btn1" >
保存数据</button>
<button id="btn2">
读取数据</button>
</body>
</html>
案例2
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
textarea {
width: 500px;
height: 200px;
}
</style>
</head>
<body>
<div>
<h2>简单的web存储留言板</h2>
<textarea id="t1"></textarea>
<br />
<input type="button" class="button" onclick="addInfo()" value="留言" />
<input type="button" class="button" onclick="cleanInfo()" value="清除留言" />
<br />
<hr />
<label id="shows"></label>
<textarea id="show" readonly="readonly"></textarea>
</div>
<script type="text/javascript">
//使用HTML5 Web存储的localStorage方式进行编写一个Web页面。
//功能是一个简易的Web留言板。留言板信息可以永久保存。并能清楚留言板内容。参考页面如下图:
function upInfo() {
var info = window.document.getElementById("t1");
var lStorage = window.localStorage;
var show = window.document.getElementById("show");
if (lStorage.myBoard) {
show.value = window.localStorage.myBoard;
}
else {
info = "还没有留言";
show.value = "还没有留言";
}
}
function addInfo() {
var info = window.document.getElementById("t1");
var lStorage = window.localStorage;
if (lStorage.myBoard) {
var date = new Date();
lStorage.myBoard += t1.value + "\n发表时间:" + date.toLocaleString() + "\n";
}
else {
var date = new Date();
lStorage.myBoard = t1.value + "\n发表时间:" + date.toLocaleString() + "\n";
}
upInfo();
}
function cleanInfo() {
window.localStorage.removeItem("myBoard");
upInfo();
}
upInfo();
</script>
</body>
</html>
本地存储 localStorage/sessionStorage/cookie的更多相关文章
- 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用
cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...
- 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题
移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...
- 关于HTML5本地缓存技术LocalStorage 本地存储 和 SessionStorage
如果你想在用户访问的时候记录或者记住他们的行为,你会想到的是什么,cookie 和session.但今天告诉你还有两种或者说是1种吧 那就是html5的 LocalStorage 本地存储和 Sess ...
- html5的本地存储localStorage和sessionStorage
html5的本地存储localStorage和sessionStorage html5中新增的比较重要的一个功能就是web storage来实现客户端本地存储数据,之前存储数据都是用cookie来实现 ...
- 【转】本地存储-localStroage/sessionStorage存储
原文地址:[js学习笔记-103]----本地存储-localStroage/sessionStorage存储 客户端存储 l WEB存储 web存储最初作为html5的一部分被定义成API形式,但 ...
- localStorage sessionStorage cookie indexedDB
目录: localStorage sessionStorage cookie indexedDB localStorage localStorage存储的数据能在跨浏览器会话保留 数据可以长期保留,关 ...
- 本地存储localStorage以及它的封装接口store.js的使用
本地存储localStorage以及它的封装接口store.js的使用 sublime-text chrome javascript readyGo 2016年11月20日发布 0 推荐 9 收藏 ...
- 本地存储 localStorage
本地存储localStorage 概念:window对象下面的属性,html5新增的,将5M大小的数据存储本地的浏览器上面. 浏览器支持存储5M大小 本地存储localStorage特点 本地存储属于 ...
- JS操作cookie以及本地存储(sessionStorage 和 localStorage )
JS操作cookie cookie的操作用两种方式 1.substring //创建cookie function setCookie(name,value,expires,path,domain,s ...
随机推荐
- 每日一九度之 题目1030:毕业bg
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:2046 解决:894 题目描述: 每年毕业的季节都会有大量毕业生发起狂欢,好朋友们相约吃散伙饭,网络上称为“bg”.参加不同团体的b ...
- YTU 2986: 删除区间内的元素(线性表)
2986: 删除区间内的元素(线性表) 时间限制: 1 Sec 内存限制: 2 MB 提交: 8 解决: 3 题目描述 若一个线性表L采用顺序存储结构,其中元素都为整数.设计一个算法,删除元素值在 ...
- asp.net dropdownlist和listbox
if (!IsPostBack) { //页面初次加载时执行这里的内容 DataSet ds = new DataSet(); //数据集 ds.Tables.Add("stu") ...
- 使用自定义材质球,实现NGUI屏幕溶解和灰显
UITexture实现的溶解: 重设UITeture的材质球实现上述效果,把当前屏幕渲染的Texture2D丢给UITexture,即可实现UI屏幕特效,背景模糊等都可以. 难点主要是实时刷新问题 解 ...
- C#中通过Selenium定位<a>标签的问题
刚才在QQ群里看到有人提问,如何实现退出百度登录问题.那么之所以会有这个问题,主要是因为这个元素,如下图所示,是无法直接定位到的: 经过研究发现,要想定位到这种元素,拢共分两步: 第一步,把鼠标移到能 ...
- java提高篇---HashMap
HashMap也是我们使用非常多的Collection,它是基于哈希表的 Map 接口的实现,以key-value的形式存在.在HashMap中,key-value总是会当做一个整体来处理,系统会根据 ...
- Mysql-学习笔记(==》插入修改数据二)
USE db; -- 建立学生信息表CREATE TABLE student( sno INT UNSIGNED NOT NULL AUTO_INCREMENT, sname VARCHAR(20) ...
- CI 同时上传多个图片
最近,一直在研究ci框架,由于项目的需求,在后台需要做一个功能同时上传两张图片.测试了好久都没有两张图片都没有上传成功,(上传的结果是只能上传第二张图片,但是图片名称是第一个图片的).在这里说一下自己 ...
- J2EE开发规范
J2EE开发规范一 JAVA编码规范1 命名规范1.1 包命名 包名称必须全部用小写. 命名方式:业务领域名.公司名.项目名.模块名 如com.yr.xxx.dao.1.2 类命名类名以英文单词取 ...
- 改变了一下blog的主题,很开心
调整了一下博客的样式,之前一直想改变下,一直不会这次终于摸索出来一点,不过是最简单的,就是在管理里面的设置,可以定制css代码,修改修改,页面就跟着你的想法走了,有时间好好修改下,暂时这个样子,简单大 ...