JavaScript+IndexedDB实现留言板：客户端存储数据

最新推荐文章于 2024-08-04 20:54:59 发布

会飞的Pikachu

最新推荐文章于 2024-08-04 20:54:59 发布

阅读量2.2k

点赞数

分类专栏： JavaScript 文章标签： javascript 数据存储

本文链接：https://blog.csdn.net/u011043843/article/details/39428971

版权

本文介绍了如何使用JavaScript结合IndexedDB在客户端实现一个留言板功能，并且着重强调了在创建对象存储空间时，必须在openRequest.onupgradeneeded事件中进行，以避免错误。内容包括留言的添加和删除操作。

摘要由CSDN通过智能技术生成

之前看到贴友有问：用js怎么实现留言板效果。当时也写了一个，但是没有实现数据存储：http://www.ido321.com/591.html

现在将之前的改写一下，原来的HTML布局不变，为了防止Google调整字体,在原来的css中加入一个样式

   1: body{

   2:     font-size: 20px;

   3:     -webkit-text-size-adjust:none;

   4: }

在google中调整字体，可以见此文：http://www.ido321.com/652.html 有评论说不行，但是LZ在这个实例中测试了，是可以的

重点是js，完整的js代码修改如下：

1:

   2:     var db;

   3:     var arrayKey=[]

   4:     var openRequest;

   5:     var lastCursor;

6:

   7:     var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;

8:

   9:     function init()

  10:     {

  11:         //打开数据库

  12:         openRequest = indexedDB.open("messageIndexDB");

  13:         //只能在onupgradeneeded创建对象存储空间

  14:         openRequest.onupgradeneeded = function(e)

  15:         {

  16:             console.log("running onupgradeneeded");

  17:             var thisDb = e.target.result;

  18:             if(!thisDb.objectStoreNames.contains("messageIndexDB"))

  19:             {

  20:                 console.log("I need to create the objectstore");

  21:                 /*

  22:                  *创建对象存储空间，第一个参数必须和打开数据库的第一个参数一致

  23:                  *设置键名是id,并且可以自增.

  24:                  *autoIncrement默认是false,keyPath默认null

  25:                  */

  26:                 var objectStore = thisDb.createObjectStore("messageIndexDB", { keyPath: "id", autoIncrement:true });

  27:                 /*

  28:                  *创建索引

  29:                  *第一个参数是索引名,第二个是属性名,第三个设置索引特性

  30:                  */

  31:                 objectStore.createIndex("name", "name", { unique: false });

  32:             }

  33:         }

34:

  35:         openRequest.onsuccess = function(e)

  36:         {

关注

专栏目录