localStorage

html5标准 Web 存储
现在的主流浏览器,包括IE 8+、Chrome 4+、Firefox 3.5+、Opera 10.5+、Safari 4+、iPhone 2+、Android 2+等,都支持localStorage本地存储功能。

localStorage没有时间上的限制,只要不主动删除,会一直保存。
单条value没有长度限制,但是每个站点使用总量有限制。
chrome的上限是4.9MB,其它浏览器的容量上限也大都在2.5-10MB之间。

检测浏览器是否支持localStorage

function check_localStorage_support()
{
if(window.localStorage){
return true;
} alert("Sorry,your browser does NOT support localStorage!");
return false;
}

localStorage 基于键值对存储,读、写、删操作很简单

localStorage.a = 3;    //设置a为"3"
localStorage["a"] = "abc"; //设置a为"abc",也覆盖了上面的值
var a1 = localStorage["a"]; //获取a的值
var a2 = localStorage.a; //获取a的值
console.log(a1 + "\t" + a2); localStorage.setItem("b","I am b"); //设置b为"I am b"
var b = localStorage.getItem("b"); //获取b的值
console.log(b);
localStorage.removeItem("b"); //清除b的值
console.log(localStorage.getItem("b")); //输出所有键值对
function showStorage(){
var storage = window.localStorage;
for(var i=0;i<storage.length;i++){
//key(i)获得相应的键,再用getItem()方法获得对应的值
document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");
}
} //清除所有键值对
localStorage.clear();

添加监听事件(本页面更新不会触发,其它页面更新时才会触发事件)

if(window.addEventListener){
window.addEventListener("storage",handle_storage,false);
}else if(window.attachEvent){
window.attachEvent("onstorage",handle_storage);
}
function handle_storage(e){
if(!e){e=window.event;}
//showStorage();
}
StorageEvent 对象
属性 类型 说明
key string 增加、删除或者修改的那个键
oldValue any 改写之前的旧值,如果是新增的元素,则是 null
newValue any 改写之后的新值,如果是删除的元素,则是 null
url string 触发这个改变事件的页面 URL

从localStorage读取一个对象

var chapter = JSON.parse(localStorage.getItem(chapterid));

使用Jquery Ajax 获取一个json并存入localStorage

$.getJSON("/worker/json/"+Chapterid+".json",function(result){
localStorage.setItem(chapterid,JSON.stringify(result));
});

php生成json的代码

class chapter_data {
public $serialid = 0;
public $serialtitle = "";
public $serialcontent = "";
}
$chapter = new chapter_data();
$chapter->serialid = 1;
$chapter->serialtitle = "文章标题";
$chapter->serialcontent = "文章内容";
echo json_encode($chapter);

localStorage 杂记的更多相关文章

  1. HTML5 localStorage本地存储

    介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2 ...

  2. 似懂非懂的localStorage和sessionStorage

    一.区别 相信很多人都见过这两个关于HTML5的新名词!HTML5种的web storage包含两种存储方式:localStorage和sessionStorage,这两种方式存储的数据不会自动发给服 ...

  3. 将css和js缓存到localStorage缓存,提高网页响应速度

    适用于小站点,这很极致,很快速~~ /** * Created by SevenNight on 2016/9/21 0021. * 插件功能:使用localStorage缓存js和css文件,减少h ...

  4. cookies,sessionStorage和localStorage的区别---web前端sessionStorage和localStorage区别

    sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.因此sessionStorage不是一种持久化的本地 ...

  5. sessionStorage 和 localStorage 、cookie

    sessionStorage 和 localStorage html5中web storage包括两种储存方式:sessionStorage 和 localStorage sessionStorage ...

  6. 浏览器对localstorage的支持情况以及localstorage在saas系统中的应用实践思考

    首先,还是要说,任何一种新特性的引入,通常有着其特有的场景和解决的目标需求,localstorage也一样.在我们的应用场景中,主要在金融业务服务的saas系统.其中涉及很多更改频率很多的元数据的客户 ...

  7. 初识html5的localStorage本地存储

    一.概述 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是 ...

  8. HTML5本地存储Localstorage

    什么是localstorage 前几天在老项目中发现有对cookie的操作觉得很奇怪,咨询下来是要缓存一些信息,以避免在URL上面传递参数,但没有考虑过cookie会带来什么问题: ① cookie大 ...

  9. [Erlang 0118] Erlang 杂记 V

       我在知乎回答问题不多,这个问题: "对你职业生涯帮助最大的习惯是什么?它是如何帮助你的?",我还是主动回答了一下.    做笔记 一开始笔记软件做的不好的时候就发邮件给自己, ...

随机推荐

  1. shell脚本编程数组

    数组: 变量:存储单个元素的内存空间 数组:存储多个元素的连续的内存空间,相当于多个变量的集合 数组名和索引 索引:编号从0开始,属于数值索引 注意:索引可支持使用自定义的格式,而不仅是数值格式,即为 ...

  2. python Telnet通讯

    摘要: python中telnetlib模块的使用: http://blog.csdn.net/five3/article/details/8099997 python实现telnet: http:/ ...

  3. Qt 插件学习(一)

    插件是什么 注意:这儿暂时不考虑静态插件(潜意识中总觉得它根本就不算插件). 插件是一个动态库(共享库).动态库是一个独立的文件中的独立模块,可被多个程序访问. 先看动态库的两种用法 1. 程序链接时 ...

  4. ArcGIS Python 坐标系信息

    ############################################################# import arcpy import os from arcpy impo ...

  5. token的解码及 判断值不为空的方法

    token 的解码要使用插件:jwt-decode 判断值不为空的方法: function isEmpty(value){ return ( value === undefined || value ...

  6. DataFactory连接MySQL数据库

    1.下载驱动 https://dev.mysql.com/downloads/connector/odbc/ 需要使用oracle登录账号密码后才能下载 下载完成后进行安装,一路下一步即可 2.连接m ...

  7. ubuntu下如何关闭某个端口?

    1. 开启防火墙 sudo ufw enable 2. 关闭某个端口,如80端口 sudo ufw deny 80 3. 查询当前防火墙状态 sudo ufw status

  8. C# WinForm设置窗口大小不可调,取消最大、最小化按键

    this.FormBorderStyle = FormBorderStyle.FixedDialog;//设置边框为不可调节 this.MaximizeBox = false;//取消最大化按键 th ...

  9. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_2-4.后端项目分层分包及资源文件处理

    笔记 4.后端项目分层分包及资源文件处理     简介:项目基本目录结构,包名称建立,配置文件建立 1.基本目录结构                 controller             se ...

  10. 【C# in depth 第三版】温故而知新(1) (转)

    声明 本文欢迎转载,原文地址:http://www.cnblogs.com/DjlNet/p/7192354.html 前言 关于这本书(<深入理解C# 第三版>)的详细情况以及好坏,自行 ...