h5 本地存储和读取信息
总结:cookie的缺点很明显,最多只能存储4KB的数据,每个HTTP请求都会被传送回服务器,明文传输(除非你使用SSL)对于购物网站而言,
cookie是非常重要的,为了实现购物车功能,把已选物品加入cookie,可以实现不同页面之间数据的同步,同时在提交订单的时候又会把这些cookie传到后台,大大方便了前后端开.
SessionStorage和LocalStorage
SessionStorage当前页面会话存在,关闭当前回话,从新打开页面就不存在了。 localStorage,他是跨多个窗口,且持续范围可超过当前会话;意味着当浏览器关闭再重新打开,数据依然是可用的;拿上面的例子来说,当修改代码之后,在新的标签打开页面,仍然会弹出“yuanzm”.
参考:https://segmentfault.com/a/1190000002701423
参考:http://killtyz.com
$(document).ready(function () {
$('#add-input').focus();
$('#add-input').bind('keypress',function(event){
var value = $(this).val();
if( event.keyCode == "13" && value ) {
var time = (new Date()).getTime();
addItem(time, value, false);
store(time, value, false);
$(this).val('');
}
});
$('#list').click( function(event){
var target = $(event.target);
if (target.hasClass('delete')) {
target.parents('.list-group-item').remove();
localStorage.removeItem(target.parents('.list-group-item').attr('data-time'));
return false;
}
if (!target.hasClass('list-group-item')) {
target = $(target).parents('.list-group-item');
}
var check = target.children('.check').not('.checked');
if (check.length) {
changeStatus(target.attr('data-time'), true);
check.addClass('checked');
check.next('.value').addClass('checked');
check.next('.value').next('.delete').show();
} else{
changeStatus(target.attr('data-time'), false);
target.children('.check.checked').removeClass('checked');
target.children('.value.checked').removeClass('checked');
target.children('.delete').hide();
}
return false;
});
store(0, 'KillTYZ 基础 Todo-List 功能实现', true);
store(1, '浏览器本地存储 功能实现,请大胆刷新页面!', true);
for(x in localStorage) {
var obj = JSON.parse(localStorage.getItem(x));
addItem(obj.time, obj.value, obj.checked);
}
}); function store(time, value, checked) {
localStorage.setItem(time, stringify(time, value, checked));
}
function changeStatus(time, checked) {
var obj = JSON.parse(localStorage.getItem(time));
obj.checked = checked ? true : false;
localStorage.setItem(time, JSON.stringify(obj));
}
function stringify(time,value,checked) {
var obj = new Object;
obj.time = time;
obj.value = value;
obj.checked = checked;
return JSON.stringify(obj);
}
function addItem(time, value, checked) {
var node = checked ? '<a href="#" class="list-group-item" data-time="'+time+'"><span class="check checked"></span><span class="value checked">'+value+'</span><span class="delete glyphicon glyphicon-trash"></span></a>' : '<a href="#" class="list-group-item" data-time="'+time+'"><span class="check"></span><span class="value">'+value+'</span><span class="delete glyphicon glyphicon-trash" style="display: none;"></span></a>';
$('#list').prepend(node);
}
h5 本地存储和读取信息的更多相关文章
- H5本地存储详细使用教程(localStorage + JSON数据存储应用框架)
一.Web Storage教程 1.概述: 对于Web Storage来说,实际上是Cookies存储的进化版.如果了解Cookie的人几乎一看Web Storage就会用,如果你从来没用过没了解过C ...
- h5 本地存储
H5本地存储有两个API,一个是Web Storage,还有一个是Web SQL.不管是哪一个,都是基于JavaScript语言来使用,接下来我就教你怎么使用H5本地存储,本文篇幅较大,JS代码较多, ...
- H5本地存储详解
H5之前存储数据一般是通过 cookie ,但是 cookie 存的数据容量比较少.H5 中扩充了文件存储能力,可存储多达 5MB 的数据.现在就实际开发经验来对本地存储 ( Storage ) 的使 ...
- 利用H5本地存储localStorage、sessionStorage
最近的业务处理上,要使用cookie缓存储一下数据,公司的cookie还搞出点问题.而用户的浏览器都是利用微信的内置,普遍支持h5的本地存储.于是利用了这个... 现代浏览器普遍开始支持H5本地存储, ...
- H5本地存储(转)
H5本地存储 一.本地存储由来的背景 众所周知Html4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是 ...
- H5本地存储技术
H5 Web存储技术 前言 web存储技术在初期的时候被定义为HTML5的一部分作为其API.后来被独立出来作为一份独立的标准. web存储标准包含localStorage对象和sessionStor ...
- H5 本地存储一
localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同 ...
- js,H5本地存储
//存储本地存储----setItem(存储名称,数据名称) var c={name:"man",sex:"woman"}; localStorage.setI ...
- H5本地存储一
localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同 ...
随机推荐
- 你是码农还是Geek?
现在深深的体会到,不仅仅人与人的差别是巨大的,程序员与程序员之间的差别同样很明显的. 普通的程序员仅仅是完成自己的任务,完成任务后不思进取,不再修改自己的代码,不再去想有没有更好的实现方式,其实重构自 ...
- CSharp Similarities and Differences
This document lists some basic differences between Nemerle and C# in a terse form. If you know Java ...
- git学习笔记01-git最基本的工作原理分布式
git学习的网站 http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 --廖雪峰老师 ...
- 新知识Tom大叔
http://www.cnblogs.com/TomXu/archive/2011/12/15/2284752.html http://www.cnblogs.com/TomXu/archive/20 ...
- RelativeLayout用到的一些重要的属性:
下面是常用的一些属性 RelativeLayout用到的一些重要的属性: 第一类:属性值为true或falseandroid:layout_centerHrizontal 水平居中android:la ...
- Eclipse使用Jetty(转)
eclipse 与 jetty 结合的最佳实践 http://www.cnblogs.com/mignet/archive/2011/12/04/eclipse_jetty_perfect_integ ...
- iOS - UINavigationController
前言 NS_CLASS_AVAILABLE_IOS(2_0) @interface UINavigationController : UIViewController @available(iOS 2 ...
- [转载] 新浪微博MySQL优化的小结和反思
原文: http://mp.weixin.qq.com/s?__biz=MzA4Nzg5Nzc5OA==&mid=206762682&idx=1&sn=1233ed1496d7 ...
- hibernate配置文件中的catalog属性
在hibernate表的映射文件中 <hibernate-mapping> <class name="com.sooyie.hibernate.orm.Link&qu ...
- unsigned char 无符号整形 减法运算
对于一个字节来说: unsigned char : 0 ~ 255 0000 0000 ~ 1111 1111 char :-128 ~ 127 ...